vue指令扩展以及监视器的使用

1.指令修饰符：通过"."指名一些指令后缀的作用效果或者对象，不同的后缀封装了不同的处理操作->简化代码；

（1）按键修饰符： @keyup.enter 键盘回车监听；

（2）v-model修饰符： v-model.trim 去除首尾空格 v-model.number转数字

（3）事件修饰符：@事件名.stop->阻止冒泡 @事件名.prevent->组织默认行为

2.v-bind控制样式增强：

v-bind不仅可以使src、text、alt等标签属性动态改变，还可以针对class类名和style行内样式进行控制；

（1）对象语法：<div class="box" :class="{类名1：boolean，类名2：boolean...}"></div>

当class动态绑定是对象时，键是类名，值就是布尔值，如果值为true，就有这个样式，false就没有这个样式；

适用场景：一个类样式，来回切换；

（2）数组语法：<div class="box" :class=[类名1，类名2，类名3...]></div>

当class动态绑定的是数组时->数组中所有类，都会添加到标签上，本质就是一个class列表；

v-bind控制行内样式：

格式：<div class="box" :style="{css属性1:css属性值、css属性2:css属性值、css属性3:css属性值...}"></div>

3.v-model作用于除text以外的其他表单元素：

v-model除了作用于input输入框，还可以作用域textArea、radio、checkbox、select：

html 复制代码

<body>
  <div id="app">
    <h3>个人信息注册</h3>

    姓名：
      <input type="text" v-model="username"> 
      <br><br>

    是否单身：
      <input type="checkbox" v-model="isSingle"> 
      <br><br>

    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input v-model="gender" type="radio" name="sex" value="1">男
      <input v-model="gender" type="radio" name="sex" value="2">女
      <br><br>

    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="cd">成都</option>
        <option value="nj">南京</option>
      </select>
      <br><br>
    自我描述：
      <textarea v-model="desc"></textarea> 
    <button>立即注册</button>
  </div>
  <script src="js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
          username:'',
          isSingle: false,
          gender:1,
          city: '',
          desc:''
      }
    })
  </script>
</body>

4.Computed计算属性：

语法：声名在vue实体对象的Computed属性中，声明语法与函数一致，但是在使用的时候与普通的data属性一样直接使用{{}}，而且不需要使用括号。

个人感觉它更像是一个由动态计算得来的属性；

methods部分也可以实现计算函数，那么Computed和在methods中实现的计算函数区别在哪里呢？

主要的区别在于Computed属性在计算过后是有缓存机制的，也就是说在更新过后会类似于一个属性一样想要用就可以直接拿来用，不需要重复计算，而methods中的计算函数本质上是函数，因此在哪里调用就在哪里执行，调用多少次就执行多少次，因此在我们多次使用计算值的时候，更建议使用computed属性因为其缓存机制可以减少计算次数，提高性能。而在处理业务逻辑的时候推荐使用methods方法，比如事件的处理函数；

computed属性的完整写法：

computed：{

计算属性名(){

get{}

set{}

}}

5.watch监听器：

作用：监视数据变化，完成一些业务逻辑或异步操作；

watch的语法：

html 复制代码

watch:{

属性名(newValue,oldValue):{
},
'对象名.属性名'(newValue,oldValue){
},
'对象名'(newValue,oldValue){
}

}

注意这里在监听对象的时候，需要在内部追加deep：true，表示深度监听。如果不加深度监听，那么监视对象的时候就是在监视对象的地址，对象的地址一般是不会改变的，因而失去了监视的作用。追加了深度监听之后监听的就是对象内部的属性了。

注意在监听对象的时候即便是用了深度监听还会出现问题，比如说我们深度监听一个对象，并对其进行属性修改，我们会发现newValue和oldValue指向的都是同一个地址，因此结果就是newValue和oldValue都是修改之后的结果，oldValue没法读取旧结果，因此需要用到深度拷贝；

类似于这种操作，原理就是JSON在进行封箱拆箱操作之后会创建一个新的对象，因此oldValue和newValue会分配到不同的对象中；