VueDay02

1. 事件处理

1.1 事件绑定

1. 使用v-on:xxx 或 @xxx 绑定事件，xxx是事件名，同原生DOM事件名。

    <button v-on:click="showTel">点我查看学校电话1</button>
    <button @click="showTel">点我查看学校电话2</button>

2. 事件的回调函数，要配置在methods中（data中写数据、methods中写方法）。

3. Vue在触发事件回调时，会传入一个默认的参数 ——事件对象(event) 。

4. 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 事件传参

1. 不传递参数：@click="test1" ，test1方法会收到一个event（事件对象）。

2. 传一个参数：@click="test2(6)" ，test2方法只会收到一个6。

3. 传多个参数：@click="test3(6,7,8)" ，test3方法会收到：6、7、8。

4. 传参+事件对象：@click="test4(6,$event)"，test4方法会收到：事件对象、6。

5. 传递的参数也可以是data中的数据，例如@click="test5(school)"。

以下写法有点傻：

<button @click="test($event)">按钮</button>
<button @click="test()">按钮</button>

1.3 事件修饰符

1. prevent：可以阻止默认行为。

2. stop：可以阻止冒泡。

3. once：事件只触发一次。

4. 事件修饰符可以串联：

    <div @click="test" class="wraper">
     <a href="xxx" @click.prevent.stop="test">按钮</a>
    </div>

1.4 键盘事件

• Vue中的按键别名：

  1. 回车 => enter

  2. 删除 => delete （退格 、 删除 按键）

  3. 退出 => esc

  4. 空格 => space

  5. 换行 => tab （必须配合keydown去使用）

  6. 上 => up

  7. 下 => down

  8. 左 => left

  9. 右 => right

• 也可以使用event.keyCode去指定具体的按键，例如：@keyup.13 绑定回车。

• 有四个系统修饰键，用法比较特殊（了解即可），分别是：ctrl、alt、shift、meta，规则如下：

  1. 若配合keydown使用：正常触发事件。

  2. 若配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

2. 姓名案例

fullname.gif

2.1 插值语法实现

1. 总结：用插值语法实现姓名案例，不是很好，因为模板过于复杂。

2. 核心代码：

<span>{{firstName.slice(0,1).toUpperCase() + firstName.slice(1)}}-{{lastName}}</span>

2.2 methods实现

1. 总结：使用methods去实现姓名案例，比使用插值好了一些，但也有问题：

   • 没有缓存，多次使用同样的值，函数会执行多次，效率不高。

   • 无关数据若发生变化，也会导致方法执行。

2. 核心代码：

methods:{
   getFullName(){
   console.log('getFullName')
   return this.firstName.slice(0,1).toUpperCase() + this.firstName.slice(1) + '-' + this.lastName
   },
}

3. 计算属性

学习计算属性前，请先把【姓名案例】分别用：插值语法、methods，去实现一下。

1. 定义：要用的数据（属性）不存在，要根据已有数据（属性）计算得来。

2. 原理：底层是通过Objcet.defineProperty实现的。

3. 优势：与methods实现姓名案例相比，内部有缓存机制，效率更高，且调试方便。

3.1 get函数

• get函数何时调用？

  1. 初次读取fullName时。

  2. 计算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 简写方式

1. 什么时候才能简写？—— 计算属性不会修改时（不需要set函数时），才能用简写形式。

2. 语法实例：

 computed:{
     fullName(){
     return xxxxx
     }
 }

4. 天气案例

weather.gif

如果回调函数的逻辑很简短，那么可以写在引号里：

<button @click="isHot = !isHot">切换天气</button>

5. 监视属性

5.1 基本使用

监视属性又称侦听器，学习监视属性前，请先完成：天气案例。

1. 作用：当被监视的属性变化时, 回调函数（handler）自动调用，至于回调函数中做什么，要看具体需求。

2. 具体编码：

   watch:{
     isHot:{
       handler(newValue,oldValue){ 
         /*********/
       }
     }
   }
   

3. 注意点：

   • 被监视的可以是：属性（data），也可以是计算属性（computed）。

   • 监视的属性必须存在，才能进行监视，若监视了不存在的属性，也不会报错！

5.2 立即监视

1. 作用：让Vue初次渲染时，数据还没有发生变化，就调用一下监视的回调函数（handler）
2. 具体配置：immediate:true

5.3 深度监视

1. Vue底层一直可以监测对象内部值的改变。
2. Vue给我们提供的watch配置，默认不监测对象内部属性的改变。
3. 配置deep:true可以监测对象内部属性的改变。
4. 使用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 简写形式

1. 明确：当不需要【立即监视】、【深度监视】的时候，才可以用简写形式。

2. 示例代码（isHot函数，就相当于完整写法中的handler）：

watch:{
    isHot(){
        /*********/
    }
}

5.6 $watch（了解即可）

通过vm.$watch也可以进行监视

vm.$watch('isHot',{
  handler(newValue,oldValue){ 
    /******/
  }
})