小白菜笔记 Vue （二）指令

指令

文档关于指令的解释：

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

• v-text：相当于{{ 数据 }}。
• v-html：可用于数据内容含有HTML不希望被作为Vue模版进行编译时。
• v-show：根据表达式的值切换元素的显示和隐藏。
• v-if：根据表达式的真值条件渲染元素。
• v-else：前一兄弟元素必须有v-if或v-else-if。
• v-else-if：前一兄弟元素必须有v-if或v-else-if。
• v-for：基于源数据多次渲染元素或模板块。此
• v-on：可缩写成@，用于绑定事件监听器。
• v-bind：可缩写成:，用于绑定vue属性。
• v-model：在表单控件或者组件上创建双向绑定。
• v-slot
• v-pre：不编译内容。
• v-cloak
• v-once

指令参数

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

v-bind:class="className"
v-on:click="doSomething"
v-on:[eventName]="doSomething"

这里的class、click、[eventName]就是参数，[eventName]可以动态监听事件类型，比如当 eventName 的值为 “click” 时，v-on:[eventName] 将等价于 v-on:click。