Vue.js语法简介(二)插值

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

<p>{{message}}</p>

Mustache标签会被替换成Vue实例中数据对象message属性的值。只要绑定的数据对象上message属性发生了改变，插值处的内容就会被更新。

这种传送数据方式跟之前不一样，之前我们做页面都是直接写

<h2>你好，世界<h2>

现在不是我们会通过变量的方式，把信息放到变量当中然后通过Mustache语法显示出来

  <div id="vm">
            {{message}}
    </div>
    <script src="./Vue.js/vue.js"></script>
    <script>
        var vm = new Vue({
           data:{
               message:"yang"
           }
        }).$mount('#vm')
       
    </script>

除此之外，双括号表示法还可以识别js语法并进行解析

 <div id="vm">
            {{message}}
            {{a+b}}
            {{message.split('').reverse().join('')}}
    </div>
    <script src="./Vue.js/vue.js"></script>
    <script>
        var vm = new Vue({
           data:{
               message:"yang",
               a:1,
               b:2
           }
        }).$mount('#vm')
       
    </script>

要注意：每个绑定都只能包含单个表达式，所以下面的示例都不会生效。

            <!-- 这是语句，不是表达式 -->
            <!-- {{var ee = 1}} -->
            <!-- if语句也不会生效，可以使用三元表达式来代替 -->
            <!-- {{if(ok) { return message}}} -->