简述 Vue 有哪些内置指令 ?
Vue提供了一些内置指令,可以在模板中进行一些常见的任务。以下是一些最常用的内置指令:
v-bind
:用于绑定一个属性到表达式。简写为:
。例如,v-bind:class
可以绑定一个 class 到一个表达式。-
v-model
:在表单元素或者组件上创建双向数据绑定。 -
v-show
:根据表达式之真假值,切换元素的显示/隐藏状态。 -
v-if
、v-else-if
、v-else
:根据表达式的值的真假,在DOM中渲染或者销毁元素。 -
v-for
:基于源数据多次渲染元素或模板块。 -
v-on
:绑定事件监听器。事件类型由参数指定。简写为@
。例如,v-on:click
可以监听一个点击事件。 -
v-text
:更新元素的textContent
。如果要更新部分的textContent
,需要使用{{ Mustache }}
插值。 -
v-html
:更新元素的innerHTML
。注意,内容按普通 HTML 插入 – 不会作为 Vue 模板进行编译。 -
v-cloak
:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 -
v-pre
:跳过这个元素和它的子元素的编译过程。可以用来显示原始的 Mustache 标签。跳过大量没有指令的节点会加快编译。 -
v-once
:只渲染元素和组件一次。随后的重新渲染, 元素/组件及其所有的子节点将被视为静态内容并跳过。
这些内置指令大大增强了模板的功能,使我们可以在模板中实现更多的逻辑。