VueJS---常用指令

1、v-once

该指令后面不需要跟任何表达式；表示元素和组件只渲染一次，不会随着数据的改变而改变。

 <h1 v-once>{{str}}</h1>

2、v-html

在某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过高{{}}来输出，会将HTML代码一起输出，所以可以使用v-html进行解析出来并且进行渲染。

<div id= 'vue' >
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>
  <script>
    let vm = new Vue({
      el: '#vue',
      data:{
        url: '<a href = "https://www.baidu.com/">百度一下</a>'
      }
    })
  </script>

3、v-pre

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

<div id= 'vue' >
  <h1>{{str}}</h1>
  <h2 v-pre>{{str}}</h2>
</div>
  <script>
    let vm = new Vue({
      el: '#vue',
      data:{
        str: '只执行一次',
      }
    })
  </script>

4、v-text

v-text作用和Mustache比较相似，都是用于将数据显示在界面中，但是此方法没有Mustache好用，尤其是在字符串拼接时。

 <h1 v-text="str"></h1>