vue的指令（参数，动态参数，修饰符，缩写等）（2024-05-07）

1、指令概念

指令 (Directives) 是带有 v- 前缀的特殊attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for指令 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<p v-if="seen">现在你看到我了</p>

v-if 指令：将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

2、指令参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

v-bind：

// v-bind 指令可以用于响应式地更新 HTML attribute：
<a v-bind:href="url">...</a>

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

//作用：动态的设置html的属性，数据绑定操作
//语法：v-bind:msg="title"
//简写：:msg="title"

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

v-on：

// v-on 指令，它用于监听 DOM 事件
<a v-on:click="doSomething">...</a>

// 简写
<a @click="doSomething">...</a>

//1 v-on:事件名=“要执行的少量代码"
//2 v-on:事件名=“函数名"
//3 v-on:事件名=“函数名(实参)"

在这里参数是监听的事件名，告知 v-on指令是绑定事件（方法）的指令，v-on是单击效果的事件。

3、指令动态参数

从 2.6.0 版本之后，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

v-bind：

// 注意：参数表达式的写法存在一些约束
<a v-bind:[attributeName]="url"> ... </a>

// 例Vue 实例有一个 data property attributeName，其值为 "href"
// 那么这个绑定将等价于 v-bind:href。
<a v-bind:href="url"> ... </a>
//简写
<a :href="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。

动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

---

动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。

例如：

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

---

避免使用大写字符来命名键名

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

v-on：

<input v-on:[eventName]="doSomething"> ... </input>

// 例Vue 实例有一个 data property eventName，其值为 "focus"
// 那么这个绑定将等价于 v-on:focus。
<input v-on:foucs="doSomething"> ... </input>
//简写
<input @foucs="doSomething"> ... </input>

在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

4、指令修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

// 1、事件修饰符
<form v-on:submit.prevent="onSubmit">...</form>
//简写
<form @submit.prevent="onSubmit">...</form>

// 2、键盘修饰符
// 只有按键为keyCode的时候才触发
<el-input type="text" @keyup.keyCode="shout()"></el-input>

// 3、鼠标按键修饰符
// 按下鼠标左键
<el-button @click.left="shout(1)">ok</el-button>

// 4、表单修饰符
// 自动过滤用户输入的首尾空格字符，中间的空格不会过滤
<el-input type="text" v-model.trim="value"></el-input>


<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

<input @keyup.13="submit">

事件修饰符：

1、.stop：阻止事件冒泡

2、.prevent：提交事件不再重新加载页面，可以用来阻止表单提交的默认行为

3、.once：点击事件只会触发一次

4、.native：使用时将被当成原生HTML标签看待

---

键盘按键修饰符：

1、@keyup：键盘抬起

2、@keydown：键盘按下

3、按键码：在键盘修饰符后面添加.xxx，用于监听按了哪个键

常用按键码：.enter，.tab，.delete，.esc，.up，.down，.space等。

---

表单修饰符：

1、.lazy：在表单输入时不会马上显示在页面，而是等输入完成失去焦点时才会显示；

2、.trim：过滤表单输入时两边的空格；

3、.number：限制输入数字或将输入的数据转为数字

---

鼠标按钮修饰符：

1、.left左键点击

2、.right右键点击

3、.middle中键点击

5、指令缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。

当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，

因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind缩写：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on缩写：

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

符号 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。