讓我們回到最開始

    <div id="app">
        <h1>{{message}}</h1>
    </div>
<script>
    var vm = new Vue({
        el:‘#app‘,
        data:{
            message:‘HelloWorld‘
        }
    })
</script>

這是一個HelloWorld，簡單的通過模板輸出。我們稱之為數據綁定，而最常見的就是“Mustache”語法 (雙大括號) 。
v-once

<span v-once>這個將不會改變{{message}</span>

原始HTML

使用{{}}語法，輸出時普通文本，而如果要輸出帶有HTML的，則要使用v-html指令

data:{
    message:‘HelloWorld‘,
    htmlText:‘<h2>這是一個標題,h2的標題</h2>‘
}

{{htmlText}}<br/>
<span v-html="htmlText"></span>

這個 span 的內容將會被替換成為屬性值 htmlText

不編譯模板

v-pre指令，可以跳過該元素和它子元素的編譯過程，來顯示原始的Mustache標簽

<span v-pre>{{message}}</span>

輸出的結果是{{message}}，不對其進行編譯。

延緩顯示

v-cloak指令保持在元素上直到關聯實例結束編譯。
CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。

 <div v-cloak>
    {{message}}
</div>

<style>
    [v-cloak]{
        display:none;
    }
</style>
 

當DOM運行到此處時，該模板還未編譯，所以將其隱藏，等實例準備完畢後，顯示。

自定義過濾器

在Vue2.0中已經除去了1.0的過濾器，但是可以自定義。分為局部的和全局的。
過濾器可以用在兩個地方，雙花括號插值和v-bind表達式。
語法為:

<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

“|”符號 左側為需要過濾的數據，右側為過濾器名稱。
另外註意,使用過濾器後，需要返回值，才能正常顯示。

局部過濾器定義

局部過濾器定義在實例中的filters選項中。
示例:過濾數字，四舍五入。

filters:{    //局部過濾器，僅當前Vue實例可用
    number:(data,n) => {
        return data.toFixed(n);  //四舍五入,參數為保留的位數
    }
}

{{12.356 | number(2)}}

過濾器方法聲明，第一個參數始終未為傳遞來的數據，後面的參數一次為方法傳遞的參數。

全局過濾器

語法：Vue.filter( id, [definition] )

// 註冊
Vue.filter(‘my-filter‘, function (value) {
  // 返回處理後的值
})

// getter，返回已註冊的過濾器
var myFilter = Vue.filter(‘my-filter‘)

示例:

Vue.filter(‘formatDate‘,function(val){
        var d = new Date(val);
        return d.getFullYear() + ‘-‘ + (d.getMonth()+1) + ‘-‘ + d.getDate() + ‘ ‘ + d.getHours() + ‘:‘ + d.getMinutes();
    });

<h3>時間:<span>{{currentDate | formatDate}}</span></h3>

Vue2.0筆記——{{}}模板與自定義過濾器