模板语法

就是做前端渲染，即将数据填充到HTML标签中。
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。
结合响应系统，Vue能够只能的计算出最少重新渲染多少组件，并把DOM操作数减到最少。

插值

文本

数据绑定使用“Mustache”语法（双大括号）的文本插值

<div>{{ msg }}</div>
<div v-once>这个将不会改变: {{ msg1 }}</div>

v-once：只渲染元素和组件一次。当数据改变时，插值处的内容不会更新。当心使用，留心是否影响该节点上的其他数据绑定。

运行结果如下图：

原始HTML

双大括号插值会把数据解析为简单的文本
需要出书HTML代码，需要v-html指令

<p>使用双大括号：{{ html }}</p>
<p>使用v-html指令：<span v-html="html"></span></p>

运行结果如下图：

Attribute

Mustache语法不能用在HTML attribute（html标签的属性）上面，需要使用v-bind指令

<button style="100px;height:50px;" v-bind:disabled="isButtonDisabled"></button>
<p>{{ isButtonDisabled ? '不可点击' : '可点击'}}</p>

运行结果如下图：

使用JavaScript表达式

可以使用JavaScript表达式，每个表达式都必须是单个表达式

<!-- 使用 JavaScript 表达式 -->
<p>{{ num + 1 }}</p>
<p>{{ ok ? 'YES' : 'NO' }}</p>
<p>message:{{ message }}</p>
<p>message反转：{{ message.split('').reverse().join('') }}</p>

运行结果如下图：

以下不会生效：

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

代码附录

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>插值</title>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 文本 -->
            <div>{{ msg }}</div>
            <div v-once>这个将不会改变: {{ msg1 }}</div>
            <!-- 原始HTML -->
            <p>使用双大括号：{{ html }}</p>
            <p>使用v-html指令：<span v-html="html"></span></p>
            <!-- Attribute -->
            <button style="100px;height:50px;" v-bind:disabled="isButtonDisabled"></button>
            <p>{{ isButtonDisabled ? '不可点击' : '可点击'}}</p>
            
            <!-- 使用 JavaScript 表达式 -->
            <p>{{ num + 1 }}</p>
            <p>{{ ok ? 'YES' : 'NO' }}</p>
            <p>message:{{ message }}</p>
            <p>message反转：{{ message.split('').reverse().join('') }}</p>
        </div>    
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: 'Hello Vue',
                    msg1: 'Hello World',
                    html: '<span style="color:blue"> This should be blue. </span>',
                    isButtonDisabled:true,
                    num:0,
                    ok:true,
                    message:"Hello, I'm Fanny!"
                }
            })
        </script>
    </body>
</html>