数据代理
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
let obj={x:100}
let obj2={y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
Vue中的数据代理
-
Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
-
Vue中数据代理的好处：
更加方便的操作data中的数据
-
.基本原理：
通过object.defineProperty把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
事件的基本使用
- 使用v-on：xxx或@xxx绑定事件，其中xxx是事件名；
- 事件的回调需要配置在methods对象，最终会在vm上；
- methods中配置的函数，不要用箭头函数！否则this就不是vm了；
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
- @click="demo"和@click="demo（$event）”效果一致，但后者可以传参；
事件修饰符
Vue中的事件修饰符：
- prevent：阻止默认事件（常用）；
- stop：阻止事件冒泡（常用）；
- once：事件只触发一次（常用）；
- capture：使用事件的捕获模式；
- self：只有event.target是当前操作的元素时才触发事件；
- passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
Vue键盘事件
-
Vue中常用的按键别名：
回车=>enter
删除=>delete（捕获“删除”和"退格”键）
退出=>esc 空格=>space
换行=>tab（特殊，必须配合keydown去使用）
上=>up
下=>down
左 =>left
右 =>right
-
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3. 系统修饰键（用法特殊）：ctr1、alt、shift、meta
（1）.配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
（2）.配合keydown使用：正常触发事件。
-
也可以使用keyCode去指定具体的按键（不推荐）
-
Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
计算属性 computed
-
定义：要用的属性不存在，要通过已有属性计算得来。
-
原理：底层借助了objcet.defineproperty方法提供的getter和setter。
-
get函数什么时候执行？
（1）.初次读取时会执行一次。
（2）.当依赖的数据发生改变时会被再次调用 -
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
-
备注：
（1）.计算属性最终会出现在vm上，直接读取使用即可。
（2）.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
简写(在不使用set的情况下)：
监视属性watch
-
当被监视的属性变化时, 回调函数自动调用, 进行相关操作
-
监视的属性必须存在，才能进行监视！！
-
监视的两种写法
(1).new Vue时传入watch配置
两种写法：
watch:{ //正常写法 isHot:{ // immediate:true, //初始化时让handler调用一下 // deep:true,//深度监视 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }, //简写 isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) } }(2).通过vm.$watch监视
两种写法：
//正常写法
vm.$watch('isHot',{
immediate:true, //初始化时让handler调用一下
deep:true,//深度监视
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
//简写
vm.$watch('isHot',(newValue,oldValue)=>{
console.log('isHot被修改了',newValue,oldValue,this)
})
深度监视
- Vue中的watch默认不监测对象内部值的改变（一层）。
- 配置deep:true可以监测对象内部值改变（多层）。
备注：
- Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
- 使用watch时根据数据的具体结构，决定是否采用深度监视。
watch:{
isHot:{
// immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
//监视多级结构中某个属性的变化
/* 'numbers.a':{
handler(){
console.log('a被改变了')
}
} */
//监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
console.log('numbers改变了')
}
}
}
computed和watch之间的区别
- computed能完成的功能，watch都可以完成。
- watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
- 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
- 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
- 这样this的指向才是vm 或 组件实例对象。
watch:{
firstName(val){
setTimeout(()=>{
console.log(this)
this.fullName = val + '-' + this.lastName
},1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}
绑定样式
1. class样式
写法:
class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
<div id="root">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br /><br />
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br /><br />
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br /><br />
</div>
2. style样式
写法：
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
<div id="root">
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br /><br />
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
