Vue3:指令

1、内容渲染指令

• 内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：
  • v-text
  • {{ }}
  • v-html

1.1 v-text

• v-text

1.2 {{ }} 语法

• vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式（英文名为：Mustache）
  • {{}}

1.3 v-html

• v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令：
  • v-html

2、属性绑定指令

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

3、事件绑定指令

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

  • v-on

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

  • 函数声明

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

  • v-on简写

3.1 事件对象 event

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

3.2 $event

• event 可以解决事件参数对象event被覆盖的问题。示例用法如下：
  • 传参

3.3 事件修饰符

• 因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：
  • 事件修饰符

3.4 按键修饰符

• 
  • 按键修饰符

4、双向绑定指令

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

4.1 v-model 指令的修饰符

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

5、条件渲染指令

• 条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
  • v-if
  • v-show
  • 两者区别
• v-else-if

6、 列表渲染指令

• vue 提供了 v-for 指令，用来辅助开发者基于一个数组来循环渲染相似的 UI 结构。
• v-for 指令需要使用 item in items 的特殊语法，其中：
    ⚫ items 是待循环的数组
    ⚫ item 是当前的循环项
• v-for
• v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items，示例代码如下：
  • v-for索引

6.1 使用 key 维护列表的状态

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