vue 插值操作

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

Mustache胡子语法（双大括号语法）,直接用{{}},将data中的值写入页面中

<div id="app">
  {{msg}}
</div>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          msg:'nihao'
      }
  }) 
</script>

v-html:
若后台返回的数据为html标签内容，如<a href="www.baidu,com"></a>，写成如下代码，会直接在页面显示

<div id="app">
  <h2>{{msg}}</h2>
 <h2>{{url}}</h2>
</div>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          msg:'hello',
          url:'<a href="http://www.baidu,com">百度一下</a>'
      }
  }) 
</script>

但其实我们想显示的为一个超链接，所以要用v-html

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

就可以显示为超链接了，

v-text：
直接将文本显示在页面中，与Mustache使用的方式差不多，都可以显示内容
但不如Mustache方便，如果想拼接个数据，还是使用Mustache便捷。
v-text中如果有拼接的值，里面的值会覆盖后面拼接的值，在此指“世界”

<h2 v-text="msg">,世界</h2>
<h2 >{{msg}} world</h2>`

v-once
该元素和组件只渲染一次，不会随数据改变而改变，想不支持响应式，就可以使用。
只使用一次，后续不会修改的值，可以使用这个指令。

<h2 >{{msg}} </h2>`
<h2 v-once>{{msg}}</h2>`

若在控制台输入：app.msg=‘msg改变了值’，上面的值，修改了，但下面的没有修改。

v-pre :
若想要将一个值原封不动的显示，不想要解析，可以在元素中加入此指令

<h2 v-pre>{{msg}}</h2>`

页面就会显示{{msg}}

v-cloak：
在一些情况下，浏览器可能会直接显示出Mustache标签，闪一下才会出现解析后的值。
作用是：在vue解析前，在div中有v-cloak属性，在解析vue后，这个属性自动删除。所以在解析前不会显示Mustache

<style>
[v-cloak]:{
display::none
}
</style>
<div id="app" v-cloak>
  <h2>{{msg}}</h2>
</div>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          msg:'hello',
      }
  }) 
</script>