![Vue.js从入门到项目实践(超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/987/44509987/b_44509987.jpg)
3.1.1 指令
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P41_3295.jpg?sign=1739680248-FnqbLQNdUd8LTNZDfmcSRa0xsKoPo8de-0-0bbef97ac5c81c209a9bfb0e95a6f75b)
指令(directives)是Vue中最常用的功能,以带有v-前缀的特殊属性形式呈现,主要负责当表达式的值改变时,将其产生的连带影响响应式地作用于DOM。
1.v-bind
v-bind:响应并更新DOM特性,例如v-bind:href、v-bind:class、v-bind:title等。
主要用法:绑定属性、动态更新HTML元素上的属性。
代码如下:
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P42_52959.jpg?sign=1739680248-wS4fR3b79k1PluKu124DZuDjnicEABZi-0-383c8f491901421fa5ec1bc92745b4cc)
运行效果如图3-1所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P42_3408.jpg?sign=1739680248-jnxGbNC45oRgdZU16sn8m56wxyYjih9U-0-b1d501f437ca8619f2afe74aaace79f4)
图3-1 v-bind运行效果
2.v-model
v-model:数据双向绑定,用于表单输入,例如<input v-model="message">。
主要用法:用在input、select、text、checkbox、radio等表单控件或者组件上创建双向绑定。它会根据控件类型自动选取正确的方法来更新元素,主要负责监听用户的输入事件以更新数据,并处理一些极端的例子。
代码如下:
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P43_52961.jpg?sign=1739680248-8xcZVSDs8qmJWjdq1iL9yT2W1qEwLI0G-0-7da4466b579f43c2a3d96e326b3eecdc)
运行效果如图3-2所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P43_3565.jpg?sign=1739680248-OM6IFYz3L4bbYOO2odGR434LJdgkEnqr-0-570c16d5b586812c72f34f1ac3206b64)
图3-2 v-model运行效果图
3.v-for
v-for:循环指令。例如:
<li v-for="(item,index) in todos"></li>
主要用法:基于源数据多次渲染元素或模块。此指令的值必须使用特定语法,为当前遍历的元素提供别名。
代码如下:
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P44_52966.jpg?sign=1739680248-XGnuEOEoAvDTugJgTja5obIl85HVQUlC-0-bda82c5517c9838bd9ef7fee405ae46a)
运行效果如图3-3所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P44_3751.jpg?sign=1739680248-E3KEYzgnySp5AMfVV1hPZJwMz68B3yJn-0-fd8a0b66e6a9eee69e3396a5241d9776)
图3-3 v-for运行效果图
提示:上述代码中的<li v-for='value in arr'>,如果其值为'value in arr',则在控制台显示data中arr的内容;如果其值为'value in json',则显示data中json的内容。
4.v-on
v-on:用于监听DOM事件,例如v-on:click、v-on:keyup等。
主要用法:绑定事件监听器。事件类型由参数指定,表达式可以是一个方法的名称或一个内联语句,如果没有修饰符也可以省略。V-on用在普通元素上时,只能监听原生DOM事件;用在自定义元素组件上时,能监听子组件触发的自定义事件。在监听原生DOM事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个$event**属性:**v-on:click="handle('ok', $event)"。
代码如下:
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P45_52968.jpg?sign=1739680248-tb4KhtIcmZ9wCFidyptIjMtpI6xRTLF7-0-bfc71fd9c6f4fa963dbf23cf12347ea0)
运行效果如图3-4所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P45_3929.jpg?sign=1739680248-rmR97JKj9PK8DraUWIegHUyfZ7BUAVfx-0-0f69c9d7070133ef0b9c0dffccbd3482)
图3-4 v-on运行效果图
5.v-html
v-html:更新元素的innerHTML。
提示:按普通HTML插入“-”,不会作为Vue模板进行编译。如果试图使用v-html组合模板,可以重新考虑是否通过使用组件来替代。在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。建议只在可信内容上使用v-html,不在用户提交的内容上使用。
代码如下:
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P46_52971.jpg?sign=1739680248-lkR4Hf1mxD5FKDRMNyLzzPkOyXRBp0Tr-0-93926637e853b54e8fd0a619bcbd47d5)
运行效果如图3-5所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P46_4053.jpg?sign=1739680248-n15BfjTkUNLWWEhCYW4mX4ylaX6iMdmg-0-649f5974431d9a9738a8e3ad5ac3cb2c)
图3-5 v-html运行效果图
6.v-text
v-text:更新元素的textContent,例如<span v-text="msg"></span>等同于<span>{{msg}}</span>。
主要用法:更新元素的textContent。如果要更新部分的textContent,需要使用{{mustache}}插值。
提示:使用<span v-text="msg"></span>和<span>{{msg}}</span>两种写法都可以。
代码如下:
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P46_52972.jpg?sign=1739680248-GJm0tTIbNv0G5CTOOEGUz3YwOpNg676Y-0-7f8e12c1b21b856ff25e2e584e06997a)
运行效果如图3-6所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P47_4342.jpg?sign=1739680248-09MtcfXagLsb3xvVDSdGWdEf7CipzQcT-0-92067a0b411df949ef6c2e6b59ef1552)
图3-6 v-text运行效果图
7.v-cloak
v-cloak:不需要表达式,这个指令保持在元素上,直到关联实例结束编译。
主要用法:当Cloak和CSS规则(如[v-cloak] {display: none})一起用时,这个指令可以隐藏未编译的<mustache>标签直到实例准备完毕,否则在渲染页面时,有可能用户会先看到<mustache>标签,然后看到编译后的数据。
代码如下:
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P47_52974.jpg?sign=1739680248-JYERDAksBPBHULCddd1opjZfstUlfgdb-0-090e6f23a9a09bed9a575e125d3077f5)
运行效果如图3-7所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P48_4525.jpg?sign=1739680248-kUdc6wiIc1EntxE2CObCz4tobQr72Voh-0-5e4f1d49790c1832cdef3b10f18a4799)
图3-7 v-cloak运行效果图
8.v-pre
v-pre:不需要表达式,用于跳过元素及子元素的编译过程,以此来加快整个项目的编译速度。例如:
<span v-pre>{{ this will not be compiled }}</span>
主要用法:跳过元素和它的子元素的编译过程。此外,它可以用来显示原始<mustache>标签。
代码如下:
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P48_52976.jpg?sign=1739680248-YiGMh3KjpHu02ytYFoXs1LJDfh4LywmA-0-1c8153e910860a2f90b5f992fd5247ae)
运行效果如图3-8所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P49_4697.jpg?sign=1739680248-noM0IGGl8EQ8zOPqjB5ipCLOEKaGKybE-0-35868ffabe4629073195c6c8e7f718cc)
图3-8 v-pre运行效果图
9.v-once
v-once:不需要表达式,只渲染元素或组件一次。以后渲染时,组件/元素及下面的子元素都当成静态页面不再被渲染,这可以用于优化更新性能。
代码如下:
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P49_52977.jpg?sign=1739680248-k4IYgXHwluELGqz3z7FTwB6PDEVDBQXX-0-1147a496758fe30be96ba6700bcfa820)
运行效果如图3-9所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P49_4875.jpg?sign=1739680248-BsPRrFeB8Eq9rULBWdjsJSYD2Hzlm0UW-0-1fdef854b3ea3a0ad2cde554f966e97e)
图3-9 v-once运行效果图