指令

【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>