[JavaScript知识库]VUE-v-once；v-cloak；v-pre；v-text；v-html的基本使用

<div id="app">
  <h2>{{message}}</h2>
<!--  改指令表示元素和组件只渲染一次，不会随着数据的改变而改变-->
  <h2 v-once>{{message}}</h2>
  <ul>
    <li v-for="item in movies">{{item}}</li>
  </ul>


</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      firstName:'kobo',
      lastName:'kobo',
      counter:100,
      movies:['aaaaa','vvvvv','bbbbb','ddddda','fffff'],
    }
  })

<div id="app">
  <h2>{{message}}</h2>
<!--  v-html 会对不标准的HTML进行解析-->
  <h2 v-html="url"></h2>


</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      firstName:'kobo',
      lastName:'kobo',
      counter:100,
      url:'<a href="http://www.baidu.com">百度一下</a>'
    }
  })

<div id="app">
  <h2>{{message}}</h2>
<!--  v-text对文本的内容进行展示-->
  <h2 v-text="message"></h2>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      firstName:'kobo',
      lastName:'kobo',
      counter:100,
    }
  })
</script>

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


</div>
<script src="../js/vue.js"></script>
<script>
<!--    在vue解析之前，div中有一个v-clock-->
  //在vue解析之后，div中没有一个属性v-clock,会把v-cloak移除掉
   const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      firstName:'kobo',
      lastName:'kobo',
      counter:100,
    }
  })