Vue - 指令知识点 - 总结

---

内容渲染指令

1. v-text 指令的缺点：会覆盖元素内部原有的内容！
2. {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
3. v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！

属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

• 在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；
• 简写是英文的 :

• 在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

  <div :title="'box' + index">这是一个 div</div>

事件绑定

• 在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算

  例 :
  {{ OK ? 'YES' : 'NO'}}
  
  {{ message.split('').reverse().join('') }}

• vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听

  <h3>count 的值为 : {{ count }}</h3>
  <!-- 语法格式为 v-on:事件名称="事件处理函数的名称" -->
  <button v-on:click="addCount">+1</button>

  注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后， 分别为：v-on:click、v-on:input、v-on:keyup

• 通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：

  const vm = new Vue({
     el: '#app',
     data: { count: 0 },
      methods: {
          //v-on 绑定的事件处理函数,需要声明在 methods 节点中
          addCount() { // 事件处理函数的名字
          // this 表示当前 new 出来的 vm 实例对象,
          // 通过 this 可以访问到 data 中的数据
          this.count += 1
          }
          },
          })
          

1. v-on: 简写是 @

2. 语法格式为：

   <button @click="add"></button>
   
   methods: {
      add() {
               // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
               this.count += 1
      }
   }

3. $event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：

   <button @click="add(3, $event)"></button>
   
   methods: {
      add(n, e) {
               // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
               this.count += 1
      }
   }

   注:$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event

   被覆盖的问题。

4. 事件修饰符：

   • .prevent 阻止默认行为

     (例: 阻止a链接的跳转, 阻止表单的提交等)

     <a @click.prevent="xxx">链接</a>

   • .stop 阻止事件冒泡

     <button @click.stop="xxx">按钮</button>

   • capture 以捕获模式触发当前的事件处理函数

     .once 绑定的事件只触发1次

     .self 只有在 event.target 是当前元素自身时触发事件处理函数

   ​

v-model 指令

1. input 输入框

   • type="radio"
   • type="checkbox"
   • type="xxxx"
2. textarea

3. select

   v-model指令的修饰符

   为了方便对用户输入的内容进行处理, vue为v-model指令提供了3个修饰符,分别是:

   修饰符	作用	示例
   .number	自动将用户的输入值转为数值类型	<input v-model.number="age">
   .trim	自动过滤用户输入的首尾空白字符	<input v-model.trim="msg">
   .lazy	在"change"时而非"input"时更新	<input v-model.lazy="msg">

条件渲染指令

1. v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏

   • 如果要频繁的切换元素的显示状态，用 v-show 性能会更好

2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏

   • 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

v-if 指令在使用的时候，有两种方式：

1. 直接给定一个布尔值 true 或 false

   <p v-if="true">被 v-if 控制的元素</p>

2. 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏

   <p v-if="type === 'A'">良好</p>

3. v-else | v-else-if 指令必须配合v-if指令一起使用,否则它将不会被识别.

列表指令渲染

1. v-for 指令需要使用 item in items 形式的特殊语法:

   • items 是待循环的数组
   • item 是被循环的每一项
2. (使用key维护列表的状态)
3. 使用key维护列表的转态

4. key的注意事项:

   • key的值只能是字符串或数字类型
   • key的值必须具有唯一性(即:key的值不能重复)
   • 建议把数据项id属性的值作为key的值(因为id属性的值具有唯一性)
   • 使用index的值当作key的值没有任何意义(因为index的值不具有唯一性)
   • 建议使用v-for指令时一定要指定key的值(既提升渲染性能,有防止列表状态错乱)