3.2　插值

应用程序实例创建完成后，就需要通过插值进行数据绑定。

数据绑定最常见的形式就是使用Mustache语法（双大括号）的文本插值：

    <span>Message: {{ message}}</span>

Mustache标签将会被替代为对应数据对象上message属性的值。无论何时，绑定的数据对象上message属性发生了改变，插值处的内容都会更新。

通过使用v-once指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但注意这会影响到该节点上的其他数据绑定：

    <span v-once>这个将不会改变: {{ message }}</span>

在谷歌浏览器中运行程序3.1.html，按F12键打开控制台，并切换到“Elements”选项，可以查看渲染的结果，如图3-2所示。

注意： Mustache语法（双大括号）会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML代码，以便浏览器能够正常解析，需要使用v-html指令。第4章会详细讲述v-html指令的使用方法。

在模板中，一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。

    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('')}}
    <div v-bind:id="'list-' + id"></div>

上面这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

    <!-- 这是语句，不是表达式 -->
    {{ var a = 1}}
    <!-- 流控制也不会生效，请使用三元表达式 -->
    {{ if (ok) { return message } }}

【例3.2】使用JavaScript表达式（源代码\ch03\3.2.html）。

    <div id="app">
       <!--使用JavaScript表达式-->
        <h2>{{ name.toUpperCase()}}</h2>
        <p>总路程为{{speed*time}}米</p>
     </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //创建一个应用程序实例
        const vm= Vue.createApp({
            //该函数返回数据对象
            data(){
              return{
                name:'xiaoming',
                speed:50,
                time:30
               }
            }
            //在指定的DOM元素上装载应用程序实例的根组件
         }).mount('#app');
    </script>

在谷歌浏览器中运行程序，结果如图3-3所示。