vue-插值操作及指令

mustache语法

变量

<h2>{{message}}</h2>
<h2>{{message}}，李银河</h2>

表达式

<h2>{{firstName + lastName}}</h2>
 <h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>

js代码

  <script>
    const app = new Vue({
      el:'#app',
      data: {
        message: 'HelloWorld',
        firstName: 'kote',
        lastName: 'brynn',
        counter: 100
      }
    })
  </script>

v-once

插值指令是一个响应式的指令，可以通过在网页开发者模式中进行修改，如果不想进行修改，就可以用v-once指令

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

v-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: 'HelloWorld',
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

v-text

用该指令会覆盖标签原有的内容

<div id="app">
  <h2>{{message}}，银河</h2>
  <h2 v-text="message">，银河</h2>
</div>

效果：

v-pre

不受插值影响原封不动显示原标签的内容

<div id="app">
  <h2>{{message}}</h2>
<!--  原封不动的显示{{message}}-->
  <h2 v-pre>{{message}}</h2>
</div>

效果图：

v-cloak

HTML文件是从上到下解析代码，当卡顿时，网页会先显示

称为插值闪烁，对用户不友好
所以用v-cloak，设置style样式，在没有解析vue时不显示代码，解析完后再显示
代码：

<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: 'HelloWorld'
      }
    })
  },1000)
</script>
<style>
  [v-cloak] {
    display: none;
  }
</style>