MVVM模型
1.M 模型Model:对应data中的数据
2.V 视图View: 模板
3.VM:视图模型ViewModel:Vue实例对象
数据代理
使用Object.defineProperty方法添加key-value
console中添加的元素颜色比较浅,这标志着这个值是不可枚举的(不可遍历的)
想让遍历则添加enumerable:true
但此时是无法在console上更改的添加writable:true
但此时是无法删除的configurable:true
getter函数/setter函数
// 当有人读取person的age属性时,get函数(getter)就会被调用,返回值就是age的值
get:function(){
return number
},
// 当有人读取person的age属性时,set函数(setter)就会被调用,返回值就是age的值
set(value){
console.log("修改了age属性值为",value)
number = value
}
图中data是配置对象
数据代理流程(使编码更加方便)
事件处理
1.使用v-on:xxx或@xxx绑定事件
2.事件的回调需要配置在methods对象中,最终会在vm上
3.methods中配置的函数,不要用箭头函数=>,否则this就不是vm了
4.methods中配置的函数,都是被vue所管理的函数,this的指向是vm或组件实例对象
5.@click="demo"和@click=”demo($event)"效果一致,但后者可以传参
事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。(注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数,就算传递了事件 也不会有什么表现 但事件确实传递了。)
修饰符主要前三个
修饰符可以连着写.XX.XX
prevent:阻止默认事件
stop:阻止冒泡
once:只触发一次
capture:捕获事件
self:有event.target是当前操作的元素是才触发事件
passive:事件的默认行为立即执行,无需等待事件回调执行完毕
键盘事件
.Vue中常用的按键别名
回车: enter
删除: delete
退出: esc
空格: space
换行: tab(特殊,必须配合keydown使用),ctrl,alt,shift,windows
上: up
下: down
左: left
右: right
2.ctrl,alt,shift,windows配合keyup时结合ctrl+c,@keyup.ctrl.y="调用函数"
计算属性(computed):Vue中将属性和计算属性分开的,计算属性需要全新的配置
计算属性:
1.定义:要用的属性不存在,要通过已有属性计算得来
2.原理:底层借助了object.defindproperty方法提供getter和setter
3.get函数什么时候执行:
1、初次读取时执行,2、所依赖的数据发生变化时执行
4.优势: 与methods实现相比,内部由缓存机制,效率更高,调试更方便
5.补充:
1.计算属性最终都会出现在vm上,直接读取即可(this)
2.如果计算属性被修改,那必须与set函数去响应修改,且set中要引起计算时依赖的数据发生改变
监视属性(watch)
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视函数的属性必须存在,才能进行监视
3.监视的两种写法:
(1)new Vue时传入watch配置
(2)通过vm.$watch监视
深度监视:
(1)Vue中的wztch默认不监测对象内部值的改变(一层)
(2)配置deep:true可以监视对象内部值改变(多层)
备注:
(1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
(2)使用watch时根据数据的具体结构,决定是否采用深度监视
计算和监听的区别:
1.computed能完成的功能,watch都可以完成
2.watch能完成的功能,computed不一定能完成,eg:watch可以进行异步操作。
备注:
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象
2.所有不能被Vue所管理的函数(定时器的回调函数、、ajax的回调函数、promise的回调函数等),最好写成箭头函数=>,这样this的指向才是vm 或 组件实例对象
数据绑定:
1.class样式:
写法:class="XXX"XXX可以试是字符串、独享、数组
字符串写法适用于:类名不确定,要动态获取
对象写法适用于:要绑定对多个样式,个数不确定,名字也不确定
数组写法适用于:要绑定多个样式,个数确定,名字确定,但不确定用不用
2.style样式:
style="{finSize:XXX}"xxx是动态的
style="[a,b]"其中,a,b是样式对象