1. 事件处理
1.1 事件绑定
- 使用
v-on:xxx或@xxx绑定事件，xxx是事件名，同原生DOM事件名。
<button v-on:click="showTel">点我查看学校电话1</button>
<button @click="showTel">点我查看学校电话2</button>
事件的回调函数，要配置在
methods中（data中写数据、methods中写方法）。Vue在触发事件回调时，会传入一个默认的参数 ——事件对象(event) 。methdos中的函数最终也会出现在vm上（但不存在数据代理）。
const vm = new Vue({
el:'#demo',
data:{
school:'尚硅谷',
tel:'10086',
},
methods:{
showTel:(event)=>{
console.log(this)
alert(this.tel)
}
}
})
console.log(vm)
通常情况下，由
Vue管理的函数（目前只学了：data函数、methods中的函数），请务必写成普通函数，这样才能保证：this是vm，一旦写成了箭头函数，this就不再是vm了。
1.2 事件传参
不传递参数：
@click="test1"，test1方法会收到一个event（事件对象）。传一个参数：
@click="test2(6)"，test2方法只会收到一个6。传多个参数：
@click="test3(6,7,8)"，test3方法会收到：6、7、8。传参+事件对象：
@click="test4(6,$event)"，test4方法会收到：事件对象、6。传递的参数也可以是
data中的数据，例如@click="test5(school)"。
以下写法有点傻：
<button @click="test($event)">按钮</button>
<button @click="test()">按钮</button>
1.3 事件修饰符
prevent：可以阻止默认行为。stop：可以阻止冒泡。once：事件只触发一次。事件修饰符可以串联：
<div @click="test" class="wraper">
<a href="xxx" @click.prevent.stop="test">按钮</a>
</div>
1.4 键盘事件
-
Vue中的按键别名：回车 =>
enter删除 =>
delete（退格 、 删除 按键）退出 =>
esc空格 =>
space换行 =>
tab（必须配合keydown去使用）上 =>
up下 =>
down左 =>
left右 =>
right
也可以使用
event.keyCode去指定具体的按键，例如：@keyup.13绑定回车。-
有四个系统修饰键，用法比较特殊（了解即可），分别是：
ctrl、alt、shift、meta，规则如下：- 若配合
keydown使用：正常触发事件。
- 若配合
keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
- 若配合
2. 姓名案例
2.1 插值语法实现
总结：用插值语法实现姓名案例，不是很好，因为模板过于复杂。
核心代码：
<span>{{firstName.slice(0,1).toUpperCase() + firstName.slice(1)}}-{{lastName}}</span>
2.2 methods实现
-
总结：使用
methods去实现姓名案例，比使用插值好了一些，但也有问题：没有缓存，多次使用同样的值，函数会执行多次，效率不高。
无关数据若发生变化，也会导致方法执行。
核心代码：
methods:{
getFullName(){
console.log('getFullName')
return this.firstName.slice(0,1).toUpperCase() + this.firstName.slice(1) + '-' + this.lastName
},
}
3. 计算属性
学习计算属性前，请先把【姓名案例】分别用：插值语法、methods，去实现一下。
定义：要用的数据（属性）不存在，要根据已有数据（属性）计算得来。
原理：底层是通过
Objcet.defineProperty实现的。优势：与
methods实现姓名案例相比，内部有缓存机制，效率更高，且调试方便。
3.1 get函数
get函数何时调用？
初次读取
fullName时。计算
fullName所【依赖的数据】发生改变时。
get函数中的this谁？ ——vm。注意：计算属性最终也会出现在
vm上，在模板中可直接使用，但千不要加.get()！
3.2 set函数(用的少)
set函数何时调用？—— 仅当计算属性被修改时。
set函数中的this是谁？ ——vm。
什么是修改计算属性？
这是修改：
this.fullName = 'li-si'这是读取：
this.fullName注意：
this.firstName = 'li'，这是修改firstName
代码示例：
computed:{
fullName:{
get(){
/**********/
}
set(value){
/**********/
}
}
}
3.3 简写方式
什么时候才能简写？—— 计算属性不会修改时（不需要
set函数时），才能用简写形式。语法实例：
computed:{
fullName(){
return xxxxx
}
}
4. 天气案例
如果回调函数的逻辑很简短，那么可以写在引号里：
<button @click="isHot = !isHot">切换天气</button>
5. 监视属性
5.1 基本使用
监视属性又称侦听器，学习监视属性前，请先完成：天气案例。
作用：当被监视的属性变化时, 回调函数（
handler）自动调用，至于回调函数中做什么，要看具体需求。-
具体编码：
watch:{ isHot:{ handler(newValue,oldValue){ /*********/ } } } -
注意点：
被监视的可以是：属性（
data），也可以是计算属性（computed）。监视的属性必须存在，才能进行监视，若监视了不存在的属性，也不会报错！
5.2 立即监视
- 作用：让
Vue初次渲染时，数据还没有发生变化，就调用一下监视的回调函数（handler） - 具体配置：
immediate:true
5.3 深度监视
-
Vue底层一直可以监测对象内部值的改变。 -
Vue给我们提供的watch配置，默认不监测对象内部属性的改变。 - 配置
deep:true可以监测对象内部属性的改变。 - 使用
watch时，要根据数据的具体结构，来决定是否采用深度监视。
5.4 特殊写法
当数据层级较深，但只想监视里面的某一个数据时候，可以不开启深度监视，只针对某个属性进行监视，例如：
new Vue({
el:'#demo',
data:{
a:{
b:{
c:{
d:1
}
}
}
},
watch:{
'a.b.c.d'(value){
console.log('a.b.c.d变化了')
}
}
})
5.5 简写形式
明确：当不需要【立即监视】、【深度监视】的时候，才可以用简写形式。
示例代码（
isHot函数，就相当于完整写法中的handler）：
watch:{
isHot(){
/*********/
}
}
5.6 $watch（了解即可）
通过vm.$watch也可以进行监视
vm.$watch('isHot',{
handler(newValue,oldValue){
/******/
}
})
