Vue插值操作

1.Mustache
就也就是双大括号 只可以在标签内 不可以添加属性值

<div id=“app”>{{data}}</div> //变量
<div id=“app”>{{data*data2}}</div>  //表达式

<div id=“app” >
   <img src="{{dizhi}}">//不可以
</div>

2.v-once指令
不会跟着数据的改变而改变

<div id=“app”>
  <h1 v-once>{{message}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
let app=new Vue({
  el:'app',
  data:{
    message:'hello',
  }
)}
</script>

3.v-html指令
直接渲染是字符串 加V-html 才是链接

<div id=“app”>
  <h1 v-once>{{message}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
let app=new Vue({
  el:'app',
  data:{
    message:'hello',
    url:
  }
)}
</script>

4.v-text

<div id=“app”>
  <h1 v-text>{{message}}</h1>
  //不灵活
</div>

<div id=“app”>
  <h1 v-text>{{message}}，哈哈哈</h1>
  哈哈哈被覆盖只有{{message}}
</div>

5.v-pre
原封不动的展示

<pre></pre>

<div id=“app”>
  <h1 >{{message}}</h1>
  <h1 v-pre>{{message}}</h1>  //展示的为{{message}}
</div>

6.v-cloak
cloak：斗篷 可以解决插值闪烁问题
在vue解析之前，div中有一个属性v-cloak
在vue解析之后，div中没有v-cloak属性

<div id=“app”  v-cloak>
  <h1 >{{message}}</h1>
</div>