Vue.js 中内置指令的有:v-text、v-html、v-bind、v-on、v-model、v-for、v-if、v-else-if、v-else、v-show、v-cloak、v-pre、Vue.component、Vue.directive、Vue.filter 。这些指令可以帮助开发者实现动态渲染、数据绑定、事件处理、条件渲染、循环渲染、注册全局组件、自定义指令和注册全局过滤器等功能。
| 指令 | 描述 |
|---|---|
| {{ expression }} | 设置元素的文本内容,与指令 v-text 功能 一致 |
| v-text | 设置元素的文本内容,相当于设置 innerText |
| v-html | 设置元素的 HTML 内容,相当于设置 innerHTML |
| v-bind | 动态绑定属性或 prop,相当于 : 绑定属性 |
| v-on | 绑定事件处理函数,相当于 @ 绑定事件 |
| v-model | 在表单控件元素上创建双向绑定 |
| v-for | 根据数据对象中的属性循环渲染元素 |
| v-if / v-else-if / v-else | 根据条件渲染元素 |
| v-show | 根据条件展示或隐藏元素 |
| v-cloak | 在元素未编译前隐藏,通常与 [v-cloak]{display: none} 配合使用 |
| v-pre | 跳过元素和子元素的编译 |
| Vue.component | 注册全局组件 |
| Vue.directive | 注册全局自定义指令 |
| Vue.filter | 注册全局过滤器 |