指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。
Vue中指令按照不同的用途可分为6大类:
1.内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有3个:v-text 、{{ }} 、v-html
v-text
![](https://img-blog.csdnimg.cn/2aa54f2b635f425aa58a78c45f92ffd7.png)
v-text指令的缺点:会覆盖元素内部原有的内容。
{{ }}
Vue提供的{{ }}语法,专门用来解决v-text会覆盖默认文本内容的问题。这种{{ }}语法的专业名称是插值表达式(英文名:Mustache)
![](https://img-blog.csdnimg.cn/5bd5e1a9e9674889807ceea087d038ea.png)
插值表达式:在实际开发中用的最多,只是内容的占位符,不会覆盖原有的内容。
v-text 与 {{ }}的效果:
![](https://img-blog.csdnimg.cn/3ea61e503fb04e7482f7dcb3a81116d8.png)
v-html
v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素则需要用到v-html这个指令:
![](https://img-blog.csdnimg.cn/5ee9b7cc398143549c4202174a2474ef.png)
![](https://img-blog.csdnimg.cn/11debe87249e4bfcbe7e1daafe68a5ec.png)
2.属性绑定指令
注意:插值表达式只能用在元素的内容节点中,不能用在元素的属性节点中。
所以,如果需要为元素的属性动态绑定属性值,则需要用到v-bind属性绑定指令。
用法示例:
![](https://img-blog.csdnimg.cn/0d1318c08f8b422d97949f4344a67aba.png)
![](https://img-blog.csdnimg.cn/945fea7d6a024d679d5e19009652d8aa.png)
在vue中,可以使用v-bind:指令,为元素的属性动态绑定值;v-bind:简写是英文式的“:”。
在vue提供的模板渲染语法中,除了支持绑定简单的数据值之外,还支持JavaScript表达式的运算,例如:
![](https://img-blog.csdnimg.cn/1bd5ee1d3a0e4a4ea5cfd0e9fd867c93.png)
![](https://img-blog.csdnimg.cn/c18373289aad456bbfaa7a2c9aac7242.png)
在使用v-bind属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如:
![](https://img-blog.csdnimg.cn/244760cebfff4e3186b51c0cddfc89b6.png)
3.事件绑定指令
Vue提供了v-on事件绑定指令,用来辅助程序员为DOM元素绑定事件监听。语法格式如下:
![](https://img-blog.csdnimg.cn/b523869573094be7a7e18d9f5227e3b7.png)
![](https://img-blog.csdnimg.cn/38f36ca37d32463f8b158e75669d1e19.png)
![](https://img-blog.csdnimg.cn/f549f0fce1a74968a958a16a4f5d0272.png)
注意:原生DOM对象有onclick、opinput、onkeyup等原生事件,替换为vue的事件绑定形式后,分别为:v-on:click、v-on:input、v-on:keyup
事件对象$event
$event的应用场景:如果默认的事件对象e被覆盖了,则可以手动传递一个$event
![](https://img-blog.csdnimg.cn/97617bdbbd99458bb1aa9722f0e2ce71.png)
![](https://img-blog.csdnimg.cn/1f17a299a31f429bb4e407e7712d4c55.png)
事件修饰符
在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此,vue提供了事件修饰符的概念,来辅助程序员更方便地对事件地触发进行控制。常见的5个事件修饰符如下:
事件修饰符 |
说明 |
.prevent |
阻止默认行为(例如:阻止a链接的跳转、阻止表单的提交等) |
.stop |
阻止事件冒泡 |
.capture |
以捕获触发当前的事件处理函数 |
.once |
绑定的事件只触发1次 |
.self |
只有在event.target是当前元素自身时触发事件处理函数 |
![](https://img-blog.csdnimg.cn/b446aac186c44513b8808a803838e016.png)
按键修饰符
在监听键盘事件时,我们经常需要判断详细的按键。此时,可以为键盘相关的事件添加按键修饰符,例如:
![](https://img-blog.csdnimg.cn/de6f336f30c54adda77a86d701b52c4c.png)
![](https://img-blog.csdnimg.cn/28faae1a502643739fb8997a4d3b3852.png)
![](https://img-blog.csdnimg.cn/f4141d9e868545379b42b0acad1af5db.png)