摘要：模板語法插值文本數據綁定最常見的形式就是使用語法雙大括號的文本插值標簽將會被替代為對應數據對象上屬性的值。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于。通常更好的想法是使用屬性而不是命令式的回調。

數據綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值：

Message: {{ msg }}

Mustache 標簽將會被替代為對應數據對象上 msg 屬性的值。無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。
通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上所有的數據綁定：

這個將不會改變: {{ msg }}

Mustache語法是將數據渲染到模板，但是渲染上去的是純文本，我們不能夠輸出真正的HTML。如果我們需要渲染一個HTML，我們需要shi用v-html指令：

var vm = new Vue({
    el:"#box",
    data:{
        msg:"
血染的風采
"
    }
})

血染的風采

mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind 指令：

var vm = new Vue({
    el:"#box",
    data:{
        msg:100
    }
})

控制臺可看div的index為101

這同樣適用于布爾類特性，如果求值結果是 false 的值，則該特性將會被刪除：

Button

// 當isButtonDisabled為true時，button不可以點擊，為false時，disabled這個屬性會刪除，button可以點擊。

我們可以在mustache語法中使用javascript表達式，例如：

{{msg+1}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:100
    }
})

101

但是在Mustache語法中不能是同語句。例如：

{{var a = 1}}

這個語句就不會被執行。

指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單個 JavaScript 表達式（v-for 是例外情況，稍后我們再討論）。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM。

{{msg}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:"汪派傳人",
        seen:false
    }
})

汪派傳人

當我們更改了seen為false時，div不會被顯示。

一些指令能夠接收一個"參數"，在指令名稱之后以冒號表示，例如上面哦我們使用過的V-bind指令。

Button

在這里disabled是參數，告知 v-bind 指令將該元素的 disabled 屬性與表達式 isButtonDisabled 的值綁定。
另一個例子是 v-on 指令，它用于監聽 DOM 事件：

{{msg}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:"汪派傳人",
    },
    methods:{
        a:function(){
            console.log("執行")
        }
    }
})

執行

{{msg|fangfa}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:"vue.js",
    },
    filters:{
        fangfa:function(value){
            console.log(value)
            return value.split("").reverse().join("")
        }
    },
})

sj.euv

{{msg|fangfa}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:"vue.js",
    },
    filters:{
        fangfa:function(value){
            console.log(value)
            return value.split("").reverse().join("")
        },
        fangfa2:function(value){
                return value.split("").reverse().join("")
            }
    },
})

vue.js

{{ msg | fangfa("arg1", arg2) }}

用@表示

    
{{reversedmsg}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd"
    },
    computed:{
        reversedmsg:function(){
            return this.msg.split("").reverse().join("")
        }
    }
})

dcba

計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 msg 還沒有發生改變，多次訪問 reversedmsg 計算屬性會立即返回之前的計算結果，而不必再次執行函數。

口說無憑，下面我們測試一下他是否具有緩存

    
{{resversedmsg}}
    
{{resversedmsg}}
    
{{resversedmsg}}
    
{{resversedmsg}}

var a = 1;
var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd"
    },
    computed:{
        resversedmsg:function(){
            a++;
            return a
        }
    }
})

2
2
2
2

resversedmsg第一次調用時,a++;這時a=2,第二次調用時，結果是2;這就證明了我們剛說的只有第一次調用時進行計算,而以后的調用因為msg沒有改變，所以直接調用了緩存的數據。

    
{{remsg()}}
    
{{remsg()}}
    
{{remsg()}}
    
{{remsg()}}

var a = 1;
var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd"
    },
    methods: {
    remsg: function () {
        a++,
        return a
        }
    }
})

2
3
4
5

這就說明了 method 相比 計算屬性 來說，假設我們有一個性能開銷比較大的的計算屬性 A，它需要遍歷一個極大的數組和做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用 method 替代。

Vue 確實提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：watch 屬性。當你有一些數據需要隨著其它數據變動而變動時，你很容易濫用 watch。通常更好的想法是使用 computed 屬性而不是命令式的 watch 回調。

    
{{msg3}}
    
    

var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd",
        msg1:1,
        msg2:2,
        msg3:3,
    },
    watch:{
        msg1:function(val){
            this.msg3=val+this.msg2
        }
        msg2:function(val){
            this.msg3=this.msg1+val
        }
    }
})

然而我們會發現我們還可以用計算屬性來控制msg3的改變

var vm = new Vue({
    el:"#box",
    data:{
        msg:"abcd",
        msg1:1,
        msg2:2,
        // msg3:3,
    },
    computed: {
        msg3: {
        function () {
                return this.msg1 + this.msg2
            }    
        }
    } 
})

當我們使用計算屬性時，計算屬性默認時getter（獲取）,不過我們有時還需要更改（setter）

computed: {
    msg3: {
        // getter
        get: function () {
            return this.msg1 + this.msg2
        },
        // setter
        set: function (newValue) {
                this.msg1=newValue
            }
    }
}

當我們在控制臺上輸入vm.msg3=100時,msg1也會隨之改變。

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的 watcher。

var vm = new Vue({
    el: "#box",
    data: {
        question: "",
        answer: "I cannot give you an answer until you ask a question!"
    },
  watch: {
    // 如果 question 發生改變，這個函數就會運行
    question: function (newQuestion) {
        this.answer = "Waiting for you to stop typing..."
        this.getAnswer()
    }
  }
});

在這個實例中，watchers會監聽data里的question屬性，當question發生改變時，answer會發生改變。
使用 watch 選項允許我們執行異步操作 (訪問一個 API)，限制我們執行該操作的頻率，并在我們得到最終結果前，設置中間狀態。這是計算屬性無法做到的。