一、数据代理
特点:
1、Vue中的数据代理: 通过vm对象来代理data对象中属性的操作(读/写)
2、Vue中数据代理的好处：更加方便的操作data中的数据
3、基本原理:
a、通过**Object.defineProperty()**把data对象中所有属性添加到vm上
b、为每一个添加到vm上的属性，都指定一个getter/setter
c、在getter/setter内部去操作(读/写)data中对应的属性
二、事件处理
事件的基本使用:
1、使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
2、事件的回调需要配置在methods对象中，最终会在vm上
3、methods中配置的函数，不要用箭头函数，否则this就不是vm
4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
5、@click="XXX"和v-on:click="XXX效果一致 @是简写形式
事件修饰符:
1、prevent: 阻止默认事件 (类比于event.prevenntDefault())
2、stop: 阻止事件冒泡 (类比于event.stopPropagation())
3、once: 事件只触发一次
4、capture：使用事件的捕获模式
5、self: 只有event.target是当前操作的元素时才触发事件
6、passive: 事件的默认行为立即执行，无需等待事件回调执行完毕
键盘事件
1、Vue中常用的按键别名
回车 => enter
删除 => delete(捕获'删除'和'退 格'键)
退出 => esc
空格 => space
换行 => tab(特殊,必须配合keydown.tab使用)
上 => up 下 => down 左 => left 右 => right
2、Vue未提供别名的按键, 可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
3、系统修饰符(用法特殊): ctrl、alt、shift、meta
-
配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其它键,事件才被触发
-
配合keydown使用:正常触发事件
4、也可以使用keyCode去指定具体的按键(不推荐)
5、Vue.config.keyCodes.自定义键名 = 键码, 可以去定制按键别名
三、计算属性
定义: 要用的属性不存在,要通过已有的属性计算得来
原理: 底层通过Object.defineproperty方法提供的getter和setter
get函数执行时机:
(1) 初次读取时会执行一次
(2) 当依赖的数据发生改变时会被再次调用
优势:与methods相比,内部会有缓存机制(复用),效率更高,调试更方便
备注:
(1) 计算属性最终会出现在vm上,直接读取使用即可
(2) 如果计算属性要被修改,那必须写set函数去响应修改,让set中要引起计算时依赖的数据发生改变
四、监视属性
1、当被监视的属性变化时,回调函数自动调用,进行相关操作
2、监视的属性必须存在,才能进行监视
3、监视的两种写法
(1) new Vue时传入watch配置
(2) 通过vm.$watch监视
深度监视:
(1) Vue中的watch默认不监测对象内部值的改变(一层)
(2) 配置deep:true 可以检测对象内部值改变(多层)
备注
(1) Vue自身可以检测对象内部值的改变,但Vue提供的watch配置默认不可以
(2) 使用watch时根据数据的具体结构,决定是否采用深度监视
computed和watch之间的区别:
1、computed能完成的功能,watch都可以完成
2、watch能完成的的功能,computed不一定能完成,例如: watch可以进行异步操作,computed不能实现异步操作
两个重要的小原则
(1) 所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象
(2) 所有不被Vue所管理的函数(例如定时器的回调函数、ajax的回调函数、promise的回调函数),最好写成箭头函数,这样this的指向才是vm或组件实例对象
五、绑定样式
class样式:
写法: class="xxx" xxx可以是字符串、对象、数组
(1) 字符串写法适用于:类名不确定、要动态获取
(2) 对象写法适用于: 要绑定多个样式,个数不确定,名字也不确定
(3) 数组写法适用于: 要绑定多个样式,个数确定,名字也确定,但是不确定用不用
style样式:
(1) 对象写法: :style="{fontSize: xxx}" 其中xxx是动态值(键值采用驼峰命名法)
(2) 数组写法: :style="[a, b]" 其中a,b是样式对象
