vue 指令 -6

作者：小恺

2022 年 6 月 10 日
本文字数：1536 字
阅读完需：约 5 分钟

v-html 指令

v-html 指令用于更新元素的 innerHTML，该部分内容作为普通的 HTML 代码插入，不会作为 vue 模板进行编译

代码演示：

<template>  <div id="app">    <div v-html="message"></div>
  </div>
</template><script>export default {  name: 'App',  data() {    return {      message: '<h1>hello world</h1>'    }  }}</script>

复制代码

运行结果：

可以看出运行结果渲染出了个 h1 标签

注意:网站上动态渲染任意的 HTML 是非常危险的，因为很容易导致 XSS 攻击。切记只有可信的内容上使用 v-html 指令，不要在用户提交的内容上使用

v-once

v-once 指令可以让标签或组件只渲染一次，该指令不需要表达式，之后再次渲染时，标签、组件及其所有的子节点将视为静态内容并跳过，这可以用于优化更新性能

代码演示：

<template>  <div id="app">    <h1>{{title}}</h1>    <a v-for="nav in navs" :href="nav.url" v-once>{{nav.name}}</a>  </div>
</template><script>export default {  name: 'App',  data() {    return {      title: 'v-once指令的用法',      navs: [        { name: '首页', url: '/home' },        { name: '新闻', url: '/news' },        { name: '新闻2', url: '/news2' }      ]    }  }}</script>

复制代码

运行结果：

v-once 指令渲染时看不出有什么不同，在看看下面代码：

<template>  <div id="app">    <h1>{{title}}</h1>    <a v-for="nav in navs" :href="nav.url" v-once>{{nav.name}}</a>    <button @click="adds">添加</button>
  </div>
</template><script>export default {  name: 'App',  data() {    return {      title: 'v-once指令的用法',      navs: [        { name: '首页', url: '/home' },        { name: '新闻', url: '/news' },        { name: '新闻2', url: '/news2' }      ]    }  },  methods: {    adds() {      this.navs.push({ name: '新闻3', url: '/news3' })    }  }}</script>

复制代码

运行结果：

点添加是没有任何变化的，这就是 v-once 指令的作用，只渲染一次，渲染结果在之后将作为静态内容而存在

注意：v-once 只对 a 标签里的起作用，对 a 标签兄弟、父级是没有影响的，如果要对 a 标签兄弟、父级渲染一次需要再次添加 v-once

v-pre 指令

v-pre 指令也需要表达式，用于跳过这个元素和他的子元素的编译过程。v-pre 指令可以用来显示原始 Mustache 标签。对于大量没有指令的节点使用 v-pre 指令可以加快·编译速度

代码演示：

<template>  <div id="app">    <h1 v-pre>{{title}}</h1>
  </div>
</template><script>export default {  name: 'App',  data() {    return {      title: 'v-pre指令的用法'    }  }}</script>

复制代码

运行结果

v-pre 不会渲染出插值，而是直接渲染出 h1 标签的内容

v-cloak 指令

v-cloak 指令也不需要表达式，这个指令保持在元素上直到关联实例编译结束，编译结束后该指令被移除。当和 CSS 规则如[v-cloak]{display:none}一起使用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

代码演示：

<template>  <div id="app">    <h1 v-cloak>{{title}}</h1>
  </div>
</template><script>export default {  name: 'App',  data() {    return {      title: 'v-pre指令的用法'    }  }}</script><style>[v-cloak] {  display: none;}</style>

复制代码

运行结果

浏览器在加载页面时，如果网速比较慢或者页面较大，那么浏览器在构造完 DOM 树后会在页面中直接显示{{title}}字样，直到 vue 的 js 文件加载完毕，vue 实例创建模板编译后{{title}}才会被替换为数据对象中的内容。这个过程中，页面是会有闪烁的，这给用户的体验不好，如果加上 CSS 规则如[v-cloak]{display:none}一起使用就可以解决这个问题了

发布于: 刚刚阅读数: 3

小恺

关注

还未添加个人签名 2021.02.22 加入

还未添加个人简介

发布

暂无评论

创作场景

vue 指令 -6

v-html 指令

v-once

v-pre 指令

v-cloak 指令

小恺

评论