记录生活留住美好时刻 ,分享个人学习笔记
1.通过vm对象来代理data对象中属性的操作 (读/写)2.Vue中数据代理的好处:更加方使的操作data中的数据3.基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部去操作 (读/写) data中对应的属性。
let number = 18 let person = { name:'张三', sex:'男' } Object.defineProperty(person,'age',{ value:18, enumerable:true, //控制属性是否可以枚举,默认值是false writable:true, //控制属性是否可以被修改,默认值是false configurable:true, //控制属性是否可以被删除,默认值是false //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值 get(){ console.log('有人读取age属性了') return number }, //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值 set(value){ console.log('有人修改了age属性,且值是',value) n
计算属性:1.定义:要用的属性不存在,要通过已有属性计算得来。2.原理:底层借助了objcet.defineProperty方法提供的getter和setter。3.get函数什么时候执行?(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。4.优势: 与methods实现相比,内部有缓存机制(复用),效率更高,调试方便5.备注:1.计算属性最终会出现在vm上,直接读取使用即可。2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
问题描述:每次修改代码后,都要重复执行两个命令,才能运行TS代码,太繁琐。简化方式:使用 ts-node 包,直接在Node.js 中执行TS代码。安装命令: npm i -g ts-node (ts-node包提供了ts-node 命令)。使用方式: ts-node hello.ts解释: ts-node 命令在内部偷偷的将TS->JS,然后,再运行JS代码
1.更早(写代码的同时)发现错误,减少找Bug、改Bug时间,提升开发效率2.程序中任何位置的代码都有代码提示,随时随地的安全感,增强了开发体验3.强大的类型系统提升了代码的可维护性,使得重构代码更加容易4.支持最新的ECMAScript 语法,优先体验最新的语法,让你走在前端技术的最前沿5.TS类型推断机制,不需要在代码中的每个地方都显示标注类型,让你在享受优势的同时,尽量降低了成本除此之外,Vue3源码使用TS重写、Anaular默认支持TS、React与TS完美配合,TypeScript已成为大中型前端项目的首选编程语言
打开终端,运行 npm init 初始化然后 npm install express 安装express框架创建01_express初体验.js文件输入下列代码://1.导入express const express =require('express') // 2.创建应用对象 const app =express() // 3.创建路由 app.get('/home',(req,res)=>{ res.end('hello express') }) // 4.监听端口,启动服务 app.listen(3000,()=>{ console.log('服务已启动,端口 3000 正在监听中...'); }) 在浏览器打开 http://localhost:3000/home
1.hash的路由地址上有#号,history模式没有2.在做回车刷新的时候,hash模式会加载对应页面,history会报错4043.hash模式支持低版本浏览器,history不支持,因为是H5新增的API4.hash不会重新加载页面,单页面应用必备5.history有历史记录,H5新增了pushstate()和replaceState()去修改历史记录,并不会立刻发送请求6.history需要后台配置
MVVM是Model-view-ViewModel的缩写,是前端开发的架构模式M: 模型,对应的就是data的数据V:视图,用户界面,DOMVM: 视图模型: Vue的实例对象,连接view和Model的桥梁核心是提供对View和ViewModel的双向数据绑定,当数据改变的时候,ViewModel能监听到数据的变化,自动更新视图,当用户操作视图的时候,ViewModel也可以监听到视图的变化,然后通知数据进行改动,这就实现了双向数据绑定。ViewModel通过双向绑定把View和Model连接起来,他们之间的同步是自动的,不需要人为干涉,所以我们只需要关注业务逻辑即可,不需要操作DOM,同时也不需要关注数据的状态问题,因为它是由MVVM统一管理。
created:在渲染前调用,通常先初始化属性,然后做渲染mounted:在模板渲染完成后,一般都是初始化页面后,再对元素节点进行操作,在这里请求数据可能会出现闪屏的问题,created里不会,一般用created比较多。请求的数据对DOM有影响,那么使用created如果请求的数据对DOM无关,可以放在mounted
1.事件修饰符 .stop 阻止冒泡 .prevent 阻止默认行为 .capture 内部元素触发的事件先在此处理 .self 只有在event.target是当前元素时触发 .once 事件只会触发一次 .passive 立即触发默认行为 .native 把当前元素作为原生标签看待2.按键修饰符 .keyup 键盘抬起 .keydown 键盘按下3.系统修饰符 .ctrl .alt .meta4.鼠标修饰符 .left 鼠标左键 .right 鼠标右键 .middle 鼠标中键5.表单修饰符 .lazy 等输入完之后再显示 .trim 删除内容前后的空格 .number 输入是数字或转为数字
铅笔Naruto
前端攻城狮