vue02

表单处理

v-model 指令，是在表单中进行元素数据的双向绑定。

尽管很神奇，但 v-model 实际上是一个语法糖：

• 文本类型的 input 和 textarea 元素会绑定 value property 并侦听 input 事件；
• checkbox 和 radio 会绑定 checked property 并侦听 change 事件；
• select 会绑定 value property 并侦听 change 事件

示例:

<input type="text" v-model="inputValue" />
<input type="text" :value="inputValue" @input="inputValue=$event.target.value" />

指令修饰符

事件修饰符：

• .stop
• .prevent
• .self
• .once
• …

按键修饰符:

• .enter
• .tab
• .space
• …

系统按键修饰符：

• .ctrl
• .shift
• .alt

v-model 指令修饰符：

• .trim
• .number
• .lazy

ref

在 DOM 节点上绑定 ref 属性，可以使用 $refs 去获取到相关联的节点，以进行 DOM 操作

计算属性

特点：缓存，是基于其依赖项进行数据缓存的（即只有当依赖项发生变化时，才会重新计算这个计算属性的值，只要依赖项不发生变化，则会一直使用之前缓存的计算值）

在选项对象中使用 computed 字段表示计算属性:

{
      // 计算属性
      computed: {
        // message 反转，这是相当于 计算属性 getter 的简写
        reversedMessage() {
          console.log('computed 计算属性')
          return this.message.split('').reverse().join('')
        },
        // reversedMessage: {
        //   get() { // getter
        //     return this.message.split('').reverse().join('')
        //   },
        //   set(val) { // setter，是给计算属性赋值时调用到的方法
        //     console.log('修改计算属性值:', val)
        //     this.message = val
        //   },
        // },
      },
}

computed VS methods:

• 计算属性有缓存，方法没有缓存
• 计算属性中不能有异步任务，方法中可以包含异步任务

列表渲染 key 值绑定

建议在使用 v-for 进行列表渲染时，都去动态绑定 key 属性值（绑定 key 值是为了让 vue 能够跟踪到节点信息进行渲染处理）。key 值通常绑定为唯一的字符串或数字（用列表遍历到的当前对象的 id 属性来绑定）

v-if vs v-show

v-if 是真正的条件渲染，它操作的是 DOM 树中的节点销毁与重建，初始条件不满足时，不会渲染节点。

v-show 不管初始条件是什么，都会渲染到 DOM 树中，它只是简单的基于 css 的 display 进行切换。

v-if 有更高的切换开销，v-show 有更高的初始渲染开销，如果要频繁的切换显示隐藏，可选 v-show，如果条件很少改变，可选择 v-if