目录
一、数据代理
二、事件处理
三、计算属性
四、监控属性
五、绑定样式
六、今日学习思维导图
一、数据代理
1.1.数据代理：通过一个对象代理对另外一个对象中属性的操作 (读/写)
1.2.Vue中数据代理的好处：更加方便的操作data中的数据
1.3.基本原理
1).通过object.defineProperty（）把data对象中所有属性添加到vm上。
2).为每一个添加到vm上的属性，都指定一个getter/setter。
3).在getter/setter内部去操作（读/写）data中对应的属性。
1.4.代码
二、事件处理
2.1.事件的基本使用
1).使用v-on：xx或@xxx绑定事件，其中xxx是事件名；
2).事件的回调需要配置在methods对象中，最终会在vm上；
3).methods中配置的函数，不要用箭头函数！否则this就不是vm了;
4).methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象
5).@click="demo"和@click="demo（$event）“效果一致，但后者可以传参；
2.2.Vue中的事件修饰符
1).prevent：阻止默认事件（常用）；
2).stop：阻止事件冒泡（常用）；
3).once：事件只触发一次（常用）；
4).capture：使用事件的捕获模式;
5).self：只有event.target是当前操作的元素是才触发事件；
6).passive：事件的默认行为立即执行，无需等待事件回调执行完毕;
2.3.键盘事件
1).Vue中常用的按键别名：
1.1).回车=>enter
1.2).删除=>delete(捕获“删除"和“退格"键)
1.3).退出=>esc
1.4).空格=>space
1.5).换行=>tab(特殊，必须配合keydown去使用)
1.6).上=>up
1.7).下=> down
1.8).左=>left
1.9).右=>right
2).Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名)
3).系统修饰键（用法特殊）：ctrl、alt、shift、meta
3.1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
3.2).配合keydown使用：正常触发事件。
4).也可以使用keyCode去指定具体的按键 (不推荐)
5).Vue.config.keyCodes，自定义键名=键码，可以去定制按键别名
2.4.代码
三、计算属性
3.1.定义：要用的属性不存在，要通过已有属性计算得来。
3.2.原理：底层借助了objcet.defineproperty方法提供的getter和setter。
3.3.get函数什么时候执行？
1).初次读取时会执行一次。
2).当依赖的数据发生改变时会被再次调用。
3.4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
3.5.注意
1).计算属性最终会出现在vm上，直接读取使用即可。
2).如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
四、监控属性
4.1.监视
1).当被监视的属性变化时，回调函数自动调用，进行相关操作
2).监视的属性必须存在，才能进行监视！！
3).监视的两种写法：
3.1).newVue时传入watch配置
3.2).通过vm.$watch监视
4).代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天气练习_监控属性</title><!---引入vue--><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body> <!--监视属性watch：1.当被监视的属性变化时，回调函数自动调用，进行相关操作2.监视的属性必须存在，才能进行监视！！3.监视的两种写法：（1）.newVue时传入watch配置（2）.通过vm.$watch监视--><!-- 准备好一个容器 --> <div id="root"><h1>今天天气很{{info}}</h1><button @click="changeWeather">切换天气</button></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el:'#root',data:{isHot:true,},computed:{info(){return this.isHot ? '炎热':'凉爽'}},methods: {changeWeather(){this.isHot = !this.isHot}},watch:{// isHot:{// immediate:true,//初始化让handler调用一下// //handler什么时候调用？当isHot发生改变时// handler(newValue,oldValue){// console.log('isHot被修改了',newValue,oldValue)// }// },info:{immediate:true,//初始化让handler调用一下//handler什么时候调用？当isHot发生改变时handler(newValue,oldValue){console.log('info被修改',newValue,oldValue)}}}})vm.$watch('isHot',{immediate:true,//初始化让handler调用一下//handler什么时候调用？当isHot发生改变时handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)} })</script></body>
</html>4.2.深度监视
1).Vue中的watch默认不监测对象内部值的改变（一层）。
2).配置deep：true可以监测对象内部值改变（多层）。
3).代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天气练习_监控属性</title><!---引入vue--><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body> <!-- 准备好一个容器 --> <div id="root"><h1>今天天气很{{info}}</h1><button @click="changeWeather">切换天气</button><hr/><h3>a的值是:{{number.a}}</h3><button @click="number.a++">点我让a+1</button><h3>b的值是:{{number.b}}</h3><button @click="number.b++">点我让b+1</button></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el:'#root',data:{isHot:true,number:{a:1,b:1}},computed:{info(){return this.isHot ? '炎热':'凉爽'}},methods: {changeWeather(){this.isHot = !this.isHot}},watch:{isHot:{immediate:true,//初始化让handler调用一下//handler什么时候调用？当isHot发生改变时handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}},//监视多级结构中某个属性的变化'number.a':{handler(){console.log('a变化')}},number:{//监视多级结构中所有属性的变化deep:true,handler(){console.log('number被修改了')}}}})</script></body>
</html>4.3.注意
1).Vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以！
2).使用watch时根据数据的具体结构，决定是否采用深度监视。
4.4.omputed和watch之间的区别
1).computed能完成的功能，watch都可以完成。
2).watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
4.5.两个重要的小原则
1).所被vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2).所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。
五、绑定样式
5.1.class样式
1).写法:class="xxx"xxx可以是字符串、对象、数组。
1.1).字符串写法适用于：类名不确定，要动态获取。
1.2).对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
1.3).数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
5.2.style样式
1).:style="{fontSize:xxx)"其中xxx是动态值。
2).:style="[a,b]"其中a、b是样式对象。
5.3.代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>绑定样式</title><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.Jay1{background-color: yellowgreen;}.Jay2{font-size: 30px;text-shadow:2px 2px 10px red;}.Jay3{border-radius: 20px;}</style><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 绑定样式：1. class样式写法:class="xxx" xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2. style样式:style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。--><!-- 准备好一个容器--><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/><!-- 绑定style样式--对象写法 --><div class="basic" :style="styleObj">{{name}}</div> <br/><br/><!-- 绑定style样式--数组写法 --><div class="basic" :style="styleArr">{{name}}</div></div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'1900',mood:'normal',classArr:['Jay1','Jay2','Jay3'],classObj:{Jay1:false,Jay2:false,},styleObj:{fontSize: '40px',color:'red',},styleObj2:{backgroundColor:'orange'},styleArr:[{fontSize: '40px',color:'blue',},{backgroundColor:'gray'}]},methods: {changeMood(){const arr = ['happy','sad','normal']const index = Math.floor(Math.random()*3)this.mood = arr[index]}},})</script></html>六、今日学习思维导图
