vue2.0---模板語法

***插值

#文本  

    數據綁定最多見的形式就是雙大括號的形式：

        <div id="app">{{message}}</div>

    只要綁定的屬性message上的值發生變化，插值出的內容都會發生變化

        var app = new Vue({
            el:"#app",
            data:{
                message:'hello Ling!'
            }
         })

#純HTML

    雙大括號會將數據解釋爲純文本，而不是HTML 。爲了輸出真正的 HTML ，就須要使用到 v-html 指令：

    <div id=‘app-2’ v-html="Myhtml"></div>
    var vm = new Vue({
        el:'#app-2',
        data:{
            rawHtml:'<p>這是一個P標籤！</p>'
        }
     });

    效果：
    ![](http://images2015.cnblogs.com/blog/1023621/201612/1023621-20161228113215023-460227816.png)

  #屬性：

    <button v-bind:id="btn_id" v-bind:disabled="check">點擊我</button>

    若是check的值是false，則disabled屬性將不會被渲染。以v-開頭的是Vue.js的指令，你立刻就能看到如何使用它們。

***表達式

能夠在指令及{{}}中使用表達式，事實上，常量或變量的名稱就是最簡單的表達式。Vue能夠經過是否帶引號來判斷一個表達式是一個變量仍是一個常量字符串。因此在之後的內容裏，指令及{{}}中的內容會被成爲表達式

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

   這些表達式都被支持，可是{{}}和指令中只支持一個表達式，不支持語句。

***過濾器

{{message | capitalize}}======》Vue.js的內置過濾器，做用是似的message中的值首字母大寫。
 另外，你也能夠自定義過濾器：
  new Vue({
    //......
    filters:{
        ling:function(value){
                return 'ling is a pretty girl！I want to say:' + value
               }
           }
   })
  過濾器能夠串聯，也能夠接受參數。在接受參數時，第一個參數默認是前面返回的字符串，第二個參數開始是用戶傳遞的參數，注意若是參數是字符串要加引號。如：
          {{message | filterA | filterB('string', somevar)}}

***指令

指令（Directives）是帶有 v- 前綴的特殊屬性。
    1：循環v-for：

    <div id="app-3">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>
    <script>部分：
     var app3 = new Vue({
        el:'#app-3',
        data:{todos:[
            {text:'ling Yan'},
            {text:'zhang San'},
            {text:'li Si'}
            ]
        }
      });
瀏覽器顯示爲：

2：v-on：
    <div id="app-4">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
        <button v-on:click="sliceMessage">sliceMessage</button>
    </div>
    <script>部分：
    var app4 = new Vue({
        el:'#app-4',
        data:{
            message:'Hello Ling Yan!'
        },
        methods:{
            reverseMessage:function(){
                this.message = this.message.split('').reverse().join('')
                },
            sliceMessage:function(){
                this.message = this.message.slice(6);
                }
            }
        });
    瀏覽器顯示爲：

3:on-bind：
       <div id="app-2">
            <span v-bind:title="message">
                鼠標滑過幾秒鐘！
            </span>
        </div>
        <script>部分：
             var app2 = new Vue({
                    el:'#app-2',
                    data:{
                            message:'你在'+new Date()+'加載此頁面'
                          }
                })
           瀏覽器系顯示效果：

v-on用於指定事件，而v-bind用於綁定屬性，因爲它們很是常見，因此Vue.js爲它們提供看縮寫的形式：
<button :id="idname" @click="say"></button> 
say爲事件的觸發函數，寫在methods屬性中。