《图解Vue3.0》- 第5节 模板语法-指令

时间:2021-6-7 作者:qvyue

指令(Directives)是vue模板中最常用的一项功能,它带有前缀v-。指令的主要职责就是当其表达式的值改变时,相应地将某些行为应用到DOM上。接下来将对每一个指令,一一了解一下。

《图解Vue3.0》- 第5节 模板语法-指令

内置指令

v-pre

编译时跳过当前元素和它的子元素。可以用来显示原始的Mustache标签。跳过大量没有指令的节点会加快编译。

示例
{{ count }}
export default { data() { return { count: 0 } } }
《图解Vue3.0》- 第5节 模板语法-指令

v-cloak

v-cloak指令保持在元素上直到关联实例结束编译。当和CSS规则如[v-cloak] { display: none; }一起使用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕,否则在渲染界面时,有可能用户会先看到Mustache标签,然后看到编译后的数据。

v-text

v-text指令可以更新元素的textContent。在内部,{{Mustache}}插值也被编译未textNode的一个v-text指令。

示例
{{message}}
export default { data() { return { message: 'Hello zzh' } } }
《图解Vue3.0》- 第5节 模板语法-指令

v-html

更新元素的innerHtml。内容按照普通的HTML插入,忽略数据绑定,如果想复用模板片段,则应当使用partials。

注意

不建议在网站上直接动态渲染任意HTML片段,很容易导致XSS攻击。

示例
export default { data() { return { message: '
message
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。