第6节 模板语法-插值

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
html写法：{{}} 包裹变量 带有 v- 前缀的特殊特性。

<div id="app">
    {{msg}}
    <p>Using mustaches: {{ rawHtml }}</p>
  <!--绑定html标签  -->
    <p v-html="rawHtml"></p>
  <!--动态绑定class  -->
    <div v-bind:class="color">test...</div>
  <!-- js中一些表达式 -->
    <p>{{ number + 1 }}</p>
    <p>{{ ok == 1 ? 'YES' : 'NO' }}</p>
  <!-- message内容反序输出 -->
    <p>{{ message.split('').reverse().join('') }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        msg : "hi vue",
        rawHtml : '<span style="color:red">this is should be red</span>',
        color:'blue',
        number : 10,
        ok : 1,
        message : "vue"
    }
});
vm.msg = "hi....";
</script>
<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>