指令

【v-once】

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

<div id="app">
    <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message: '你好!'
      }
    })
</script>

　　

【v-html】

某些情况下，从服务器请求到的数据的本身就是html代码。

• 如果我们直接使用{{}}来输出，会将html代码也一起输出。
• 但是我们希望的是按照html格式进行解析，并且显示对应的内容

如果我们希望解析出html展示，可以使用v-html指令

• 该指令后面往往会跟上一个string类型
• 会将string的html解析出来并进行渲染

<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message: '你好!',
          url: '<a href="http://www.baidu.com">百度一下</a><button>普通按钮</button>'
      }
    })
</script>

　　

 

【v-pre】

用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message: '你好!'
      }
    })
</script>