![Vue.js 3.0从入门到精通(视频教学版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/154/44510154/b_44510154.jpg)
4.5 指令
指令(Directives)是带有“v-”前缀的特殊特性。指令特性的值预期是单个JavaScript表达式(v-for是例外情况)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。
例如下面代码中,v-if指令将根据表达式布尔值(boole)的真假来插入或移除<p>元素。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P64_165349.jpg?sign=1739566811-M9wdYz8h0tcFoCfE4CnsaKe0haQiMMZy-0-5a92f54ebd8bef58247342ce7e5aedd5)
1.参数
一些指令能够接收一个“参数”,在指令名称之后以英文冒号表示。例如,v-bind指令可以用于响应式地更新HTML特性:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P65_165350.jpg?sign=1739566811-rZbTGJtfo3kAShEChwpsjR95RaVFx3gw-0-50cdc70fc6d894cf106f9b89f3a49f44)
在这里href是参数,告知v-bind指令将该元素的href特性与表达式url的值绑定。
v-on指令用于监听DOM事件,例如下面代码:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P65_165351.jpg?sign=1739566811-8uR0FfhLC2ijk6DO3ifnw01UXynCpbvy-0-193ae709e318d83a6bd0378c4cb4bf60)
其中参数click是监听的事件名,在后面章节中将会详细介绍v-on指令的具体用法。
2.动态参数
从Vue 2.6.0版本开始,可以把方括号括起来的JavaScript表达式作为一个指令的参数:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P65_165352.jpg?sign=1739566811-horyadD1A20pqPqQWcMskaOj6Oi7AY0L-0-33e609dcaa55d54ad31aa4090a8ccb73)
这里的attributeName会被作为一个JavaScript表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,在Vue实例的data选项有一个attributeName属性,其值为"href",那么这个绑定等价于v-bind:href。
同样地,可以使用动态参数为一个动态的事件名绑定处理函数:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P65_165353.jpg?sign=1739566811-Tv42KeIixTmzyJBCKoAElijFGhyiNTtL-0-f45bc2e55e3fe39a0d8ebfb95ea46a77)
在这段代码中,当eventName的值为"click"时,v-on:[eventName]将等价于v-on:click。
下面看一个示例,其中用v-bind绑定动态参数attr,v-on绑定事件的动态参数things。
【例4.10】动态参数(源代码\ch04\4.10.html)。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P65_164917.jpg?sign=1739566811-egd6jlFh35JuuTzaeZXN05jJSMe7JghM-0-48d1d216c445208b9acf6d7f46ea4621)
在浏览器中运行程序,在页面中单击“单击事件”按钮,弹出“触发了单击事件”,结果如图4-13所示。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P66_19658.jpg?sign=1739566811-6no7L94PgNzf6iPGfwG75x75Ip6bVtov-0-bfe22f1cab270c0f3ddd06e540044fdd)
图4-13 动态参数
对动态参数的值的约束:动态参数预期会求出一个字符串,异常情况下值为null。这个特殊的null值可以被显性地用于移除绑定。任何其他非字符串类型的值都将会触发一个警告。
动态参数表达式有一些语法约束,因为某些字符,如空格和引号,放在HTML属性名里是无效的。例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P66_164919.jpg?sign=1739566811-1V8VhiykltegBSro8flr0RuTglJueFWk-0-e86b321cc599a5e1adc54dff49ae039a)
所以不要使用带空格或引号的表达式,或用计算属性替代这种复杂表达式。
在DOM中使用模板时,还需要避免使用大写字符来命名键名,因为浏览器会把属性名全部强制转为小写:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P66_164920.jpg?sign=1739566811-5l1kCUbKrpOgwWhl3Xh8glwqjOE1R4DA-0-22edfe8b582ccaa470133c4ce448988d)
3.事件修饰符
修饰符(modifier)是以半角句号“.”指明的特殊后缀,用于指出v-on应该以特殊方式绑定。例如,.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault():
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P66_165354.jpg?sign=1739566811-GuEmGLG7eKmoazcy6h4Oz8sN3FCS6LP3-0-8c86c3d385c28185d8d168c50739baf6)