{{ }}——Mustache语法

用途：用于将data中的文本数据插入到页面中

v-text

用途：用途和{{}}一致，但没有{{}}灵活

v-html

用途：将内容按照HTML格式进行解析并显示对应内容

代码示例

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

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      link: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

v-once

用途：表示元素和组件只渲染一次，不会随着数据的改变而改变

代码示例

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

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello world'
    }
  })
</script>
<!-- 
  控制台输入：vm.message = 'abc'
  界面显示不会变化
 -->

v-pre

用途：用于跳过元素的编译过程，显示原本的Mustache语法

v-cloak

用途：用于避免浏览器可能会直接显示出未编译的Mustache标签

代码示例

<style>
  [v-cloak] {
    display: none;
  }
</style>

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

<script>
  setTimeout(() => {
    const vm = new Vue({
      el: '#app',
      data: {
        name: 'VueJs'
      }
    })
  }, 3000)
</script>
<!-- 
如果不设置 v-cloak及对应样式，最初三秒界面会显示 Hello {{name}}
设置 v-cloak及对应样式后，最初三秒界面显示为空白，随后显示 Hello VueJs
-->

几点思考

• 常用： {{}}和v-text和v-html

  • {{}}和v-text为一组，均能将数据解析后插入到页面中，但{{}}更常用，因为其更灵活
  • v-text和v-html为一组，二者用法一致，均用于向页面展示数据，后者会将内容按照html格式进行解析后再展示，会带来xss攻击问题（需要解决方案）

• 不常用：v-once、v-pre和v-cloak，用于特定场合，比如：

  • v-pre和v-cloak为一组，v-pre用于展示原本的Mustache语法，v-cloak配合特定css样式可起到相反的效果
  • v-once用于一次性展示，比如需要同时展示变化前后数据的场景