Vue的插值语法

1、mustache语法

<div id="app">
  {{message}} vue
  <br>
  {{firstName + ' ' + lastName}}
  <br>
  {{firstName}} {{lastName}}
  <br>
  {{counter * 2}}
</div>

2、v-once

当希望插值表达式中的内容仅渲染一次时......

<div id="app">
  <h2>{{message}}</h2>
  <!--v-on : 该指令修饰的元素和组件只渲染一次，不会随着数据的改变而改变  -->
  <h2 v-once> {{message}}</h2>
</div>

3、v-html

当需要渲染的数据是一段 html 文本时

<div id="app">
  <h2 v-html="url"></h2>
</div>

const app = new Vue({
  el: "#app", //用于挂载要管理的元素
  data: {   //定义数据
    url: '<a href="http://www.baidu.com">百度一下</a>'
  }
})

4、v-text

和 mustache语法一致.....

只不过mustache语法会进行拼接，而 v-text 会进行替换

<div id="app">
  <h2>{{message}},houchen</h2>
  <h2 v-text="message">,houchen</h2> <!--v-text中的内容会将vue覆盖-->
</div>

5、v-pre

不对 mustache语法进行解析 ......

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>   <!-- 显示{{message}}，不对插值表达式进行解析 -->
</div>

6、v-cloak

当vue正在渲染页面时，不显示 {{message}}

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