（视频笔记）02- 六大指令

前端小怪兽zmy

已于 2023-04-19 10:28:39 修改

阅读量131

点赞数

分类专栏： vue视频笔记文章标签： vue.js

于 2023-04-18 21:23:14 首次发布

本文链接：https://blog.csdn.net/zmy967131/article/details/130206613

版权

vue视频笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、指令

指令（ DirectivesDirectives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue中的指令按照不同的用途可以分为如下 6 大类：
1、内容渲染指令
2、属性绑定指令
3、事件绑定指令
4、双向绑定指令
5、条件渲染指令
6、列表渲染指令

1、内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM元素的文本内容。常用的内容渲染指令有如下 3 个:

v-text
{{ }}
v-html

① v-text

注意: v-text 指令会覆盖元素内默认的值

在实际开发中用的不多

② {{ }}

vue提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。

这种 {{ }} 语法的专业名称是 插值表达式（英文名为：Mustache）

注意：相对于v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容

③v-html

v-text指令和插值表达式只能渲染纯文本内容。

如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要用到 v-html 这个指令，它能识别html标签。

最终效果如下：

2、属性绑定指令

插值表达式只能用在元素的内容节点中，不能用在属性节点中！（比如需要将input标签中的placeholder属性改成data中的值）

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。用法示例如下：

由于 v-bind 指令在开发中使用频率非常高，因此，vue官方为其提供了简写形式

（简写为英文的 :）

※使用Javascript表达式

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

单引号——字符串动态拼接

3、事件绑定指令

vue提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：

注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件。

替换为 vue 的事件绑定形式后，分别为： v-on:click 、v-on:input 、v-on:keyup

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

由于 v-on 指令在开发中使用频率非常高，因此， vue 官方为其提供了简写形式 @

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event 。同理，在 v-on 指令（简写为 @ ）所绑定的事件处理函数中同样可以接收到事件参数对象 event ，示例代码如下：

在绑定事件的时候如果不传参，那么在methods里面对应的函数会默认接收一个事件对象e

事件对象.html

<body>
  <div id="app">
    <p>count 的值是：{{ count }}</p>
    <!-- 需求：如果 count 是偶数，则 按钮背景变成红色，否则，取消背景颜色 -->
        <button @click="add($event, 1)">+N</button>
    <!-- vue 提供了内置变量，名字叫做 $event，它就是原生 DOM 的事件对象 e -->
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
       //顺序可以换
        add(e, n) {
          this.count += n
          // 判断 this.count 的值是否为偶数
          if (this.count % 2 === 0) {
            // 偶数
            e.target.style.backgroundColor = 'red'
          } else {
            // 奇数
            e.target.style.backgroundColor = ''
          }
        }
      },
    })
  </script>
</body>

事件修饰符

在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个：

使用格式如下：

按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键 。此时，可以为键盘相关的事件添加按键修饰符，例如：

4、双向绑定指令

vue提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

<input type="text"  v-model="username">
<input type="text"  :value="username">

上面一个，文本框内容变化，vue里data存放的数据也变化

下面一个，文本框内容变化，vue里data存放的数据不变化

但是二者，data存放的数据变化，文本框内容都会变化。但v-model一般作用于表单，比如textarea，input，select等

双向绑定指令.html 选择不同的城市，data里的city值发生变化，一开始city为空

<body>
  <div id="app">
    <select v-model="city">
      <option value="">请选择城市</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">广州</option>
    </select>
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'zhangsan',
        city: ''
      }
    })
  </script>

v-model修饰符

 <input type="text" v-model="n1"> + <input type="text" v-model="n2"> = <span>{{ n1 + n2 }}</span>

上述代码的效果：

n1和n2一开始都是数字没有加引号

但是修改文本框的数值以后：

n1变成了字符串，字符串+数字，+变成了字符串的拼接

解决方案：在v-model后面加.number，把用户的输入转成数字

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

之前文本框变化，data里的数据同步变化，但是有时候，我们不需要知道同步变化的过程，只需要知道用户最后改成了什么（文本框失去焦点时的数据是什么），就可以加.lazy

5、条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。

条件渲染指令有如下两个，分别是：

v-if
v-show

核心原理不同：

v-show	v-if 指令会动态地创建或移除DOM元素从而控制元素在页面上的显示与隐藏
v-if	v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏

性能消耗不同：

v-if 有更高的切换开销，而 v-show有更高的初始渲染消耗

v-show

如果需要非常频繁地切换，则使用 v-show 较好

v-if

如果在运行时条件很少改变，则使用 v-if 较好

如元素在初始需要隐藏，后期展示的可能性不大，也用v-if较好

v-else 和 v-else-if

v-if 可以单独使用，或配合 v-else 指令一起使用

v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

v-else-if 指令，顾名思义，充当 v-if 的“ else-if 块，可以连续使用

v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

6、列表渲染指令

vue提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items 形式的特殊语法，其中：

items 是待循环的数组
item 是被循环的每一项

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item,index) in items，示例代码如下：

item是循环项，index是索引

注意： v-for指令中的 item项和 index索引都是形参，可以根据需要进行重命名 。

比如 (user , i) in userlist

使用 key 维护列表的状态

     <tbody>
        <!-- 官方建议：只要用到了 v-for 指令，那么一定要绑定一个 :key 属性 -->
        <!-- 而且，尽量把 id 作为 key 的值 -->
        <!-- 官方对 key 的值类型，是有要求的：字符串或数字类型 -->
        <!-- key 的值是千万不能重复的，否则会终端报错：Duplicate keys detected -->
        <tr v-for="(item, index) in list" :key="item.id">
          <td>{{ index }}</td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>

当列表的数据变化时，默认情况下，vue会尽可能的复用已存在的 DOM元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性。key值必须唯一，不然会报错！

key值的注意事项：

① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性（即 key 的值不能重复）
③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一）
④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性，比如使用unshift方法向列表添加数据，如果一开始在索引为1的列表上打钩，添加完数据以后，勾跑到别的数据上去了，因为索引为1的数据不是原来那个了）
⑤ 建议使用 v-for 指令时一定要指key的值（既提升性能、又防止列表状态紊乱）