vue3.0 指令 Directives

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令。

指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即 v-for、v-on 和 v-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。

---

例： v-if

<p v-if="seen">Now you see me</p>

v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p> 元素。

---

参数 Arguments

某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。

<a :href="url"> ... </a>

这个 href 就是一个参数，它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。

---

动态参数

同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内。

<a :[attributeName]="url"> ... </a>

这里的 attributeName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。举例来说，如果你的组件实例有一个数据属性 attributeName，其值为 "href"，那么这个绑定就等价于 :href。

还可以将一个函数绑定到动态的事件名称上。

<a @[eventName]="doSomething">

在此示例中，当 eventName 的值是 "focus" 时，@[eventName] 就等价于@focus。 

• 动态参数中表达式的值应当是一个字符串，或者是 null。
• 动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，所以官方推荐使用计算属性。
• 当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写。单文件组件内的模板不受此限制。