【Vue3】指令(Directives)的运用

简言

vue3的指令是其核心内容之一，在此做下总结。directives
指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，例如：v-bind、v-html等。

指令

vue的指令就是以v-为前缀的属性，他期望的值大部分是js表达式（除v-for、v-slot、v-on）,作用是在表达式值改变后响应式的更新dom。

介绍

下面是官网中的较为经典的一张图，他表明了指令有 name(名)、argument（参数）、modifiers（修饰符）、value（值）四部分组成。

name 名称

name就是指令的名称，书写时带v-前缀，例如：v-on是on指令、v-if是if指令、v-for是for指令。

arguments 参数

某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute：

<a v-bind:href="url"> ... a>


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

这里 href 就是一个参数，它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。在简写中，参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符。

另一个例子是 v-on 指令，on指令的参数就是各种事件，它将监听 DOM 事件：

<a v-on:click="doSomething"> ... a>


<a @click="doSomething"> ... a>

这里的参数是要监听的事件名称：click。v-on 有一个相应的缩写，即 @ 字符。

除了是静态参数外，也可以是动态参数，使用一个字符串变量，并使方括号将其包裹：

<a v-bind:[attributeName]="url"> ... a>

attributeName是个变量,假如，值为’bar’,则 v-bind:bar=“url”。

modifiers修饰符

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

<form @submit.prevent="onSubmit">...form>

vue3的修饰符有很多，大部分分为两种：v-model修饰符和事件修饰符。

v-model修饰符

• .lazy — 加 lazy 修饰符来改为在每次 change 事件后更新数据。
• .number ----- 输入内容转数字。
• .trim — 去除两端空格。

事件修饰符

修饰符	描述
.stop	单击事件将停止传递,停止捕获冒泡, 相当于event.stopPropagation
.prevent	阻止默认行为。相当于event.preventDefault()
.self	仅当 event.target 是元素本身时才会触发事件处理器
.capture	添加事件监听器时，使用 capture 捕获模式
.once	点击事件最多被触发一次
.passive	提高事件性能，事件的默认行为 (scrolling) 将立即发生而非等待，相当于事件监听器的第三个参数的passive:true
按键修饰符	Vue 为一些常用的键盘按键和鼠标按键提供了别名,例如： .enter、.up、.down、.tab、.esc、.right、.middle等。

<a @click.stop="doThis">a>


<form @submit.prevent="onSubmit">form>


<a @click.stop.prevent="doThat">a>


<form @submit.prevent>form>



<div @click.self="doThat">...div>


<div @click.capture="doThis">...div>


<a @click.once="doThis">a>



<div @scroll.passive="onScroll">...div>

<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />

<input @keyup.alt.enter="clear" />


<div @click.ctrl="doSomething">Do somethingdiv>

<button @click.ctrl="onClick">Abutton>


<button @click.ctrl.exact="onCtrlClick">Abutton>


<button @click.exact="onClick">Abutton>

内置指令

vue内置了许多指令供使用。

指令	描述
v-text	文本指令，更新元素的文本内容，v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。
v-html	html指令,更新元素的 innerHTML。
v-show	基于表达式值的真假性，来改变元素的可见性。v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。
v-if	if指令，基于表达式值的真假性，来条件性地渲染元素或者模板片段。当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。
v-else	表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。不能单独使用，上面兄弟元素必须是v-if或v-else-if
v-else-if	表示 v-if 的“else if 块”。可以进行链式调用。不能单独使用，上面兄弟元素必须是v-if或v-else-if
v-for	for循环指令
v-on	事件指令。缩写 @
v-bind	动态绑定指令，动态的绑定一个或多个 attribute，也可以是组件的 prop。缩写 :
v-model	在表单输入元素或组件上创建双向绑定。
v-slot	用于声明具名插槽或是期望接收 props 的作用域插槽。缩写 #
v-pre	跳过该元素及其所有子元素的编译。
v-once	仅渲染元素和组件一次，并跳过之后的更新。
v-memo	3.2+版本, 缓存指令, 为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。
v-cloak	用于隐藏尚未完成编译的 DOM 模板。

结语

详情内容可参考vue3官网。