Vue-02-插值操作

一、Mustache 语法（双大括号/胡子语法）

Mustache语法中，不仅可以直接写变量，也可以写简单的表达式

    <h2>{{message}}</h2>
    <h2>{{firstname + lastname}}</h2>
    <h2>{{firstname + ' ' + lastname}}</h2>
    <h2>{{firstname}} {{lastname}}</h2>
    <h2>{{counter*2}}</h2>

二、v-once 指令

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

    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>

三、v-html 指令

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码，如果直接通过{{}}来输出，会将HTML代码一起输出，v-html指令可以将数据按照HTML格式进行解析，并显示对应内容

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

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

四、v-text 指令

v-text作用和Mustache比较相似，都是用于将数据显示在界面中。但用法不如Mustache灵活

    <h2>{{message}}</h2>
    <h2 v-text="message"></h2>

五、v-pre 指令

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

    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>

六、v-cloak 指令

在某些情况下，我们浏览器可能会直接显示出未编译的Mustache标签

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

  <div id="app" v-cloak>{{message}}</div>
  <script src="./js/vue.js"></script>
  <script>
    //在vue解析之前，div中有一个属性v-cloak
    // 在vue解析之后，div中v-cloak属性消失
    setTimeout(function () {
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好'
        }
      })
    }, 1000)
  </script>