摘要：模板語(yǔ)法插值文本數(shù)據(jù)綁定最常見(jiàn)的形式就是使用語(yǔ)法雙大括號(hào)的文本插值標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象上屬性的值。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于。通常更好的想法是使用屬性而不是命令式的回調(diào)。

數(shù)據(jù)綁定最常見(jiàn)的形式就是使用 “Mustache” 語(yǔ)法（雙大括號(hào)）的文本插值：

Message: {{ msg }}

Mustache 標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象上 msg 屬性的值。無(wú)論何時(shí)，綁定的數(shù)據(jù)對(duì)象上 msg 屬性發(fā)生了改變，插值處的內(nèi)容都會(huì)更新。
通過(guò)使用 v-once 指令，你也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新。但請(qǐng)留心這會(huì)影響到該節(jié)點(diǎn)上所有的數(shù)據(jù)綁定：

這個(gè)將不會(huì)改變: {{ msg }}

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

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

血染的風(fēng)采

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

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

控制臺(tái)可看div的index為101

這同樣適用于布爾類(lèi)特性，如果求值結(jié)果是 false 的值，則該特性將會(huì)被刪除：

Button

// 當(dāng)isButtonDisabled為true時(shí)，button不可以點(diǎn)擊，為false時(shí)，disabled這個(gè)屬性會(huì)刪除，button可以點(diǎn)擊。

我們可以在mustache語(yǔ)法中使用javascript表達(dá)式，例如：

{{msg+1}}

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

101

但是在Mustache語(yǔ)法中不能是同語(yǔ)句。例如：

{{var a = 1}}

這個(gè)語(yǔ)句就不會(huì)被執(zhí)行。

指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的值預(yù)期是單個(gè) JavaScript 表達(dá)式（v-for 是例外情況，稍后我們?cè)儆懻摚?。指令的職?zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。

{{msg}}

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

汪派傳人

當(dāng)我們更改了seen為false時(shí)，div不會(huì)被顯示。

一些指令能夠接收一個(gè)"參數(shù)"，在指令名稱(chēng)之后以冒號(hào)表示，例如上面哦我們使用過(guò)的V-bind指令。

Button

在這里disabled是參數(shù)，告知 v-bind 指令將該元素的 disabled 屬性與表達(dá)式 isButtonDisabled 的值綁定。
另一個(gè)例子是 v-on 指令，它用于監(jiān)聽(tīng) DOM 事件：

{{msg}}

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

執(zhí)行

{{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

計(jì)算屬性是基于它們的依賴(lài)進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新求值。這就意味著只要 msg 還沒(méi)有發(fā)生改變，多次訪(fǎng)問(wèn) reversedmsg 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。

口說(shuō)無(wú)憑，下面我們測(cè)試一下他是否具有緩存

    
{{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第一次調(diào)用時(shí),a++;這時(shí)a=2,第二次調(diào)用時(shí)，結(jié)果是2;這就證明了我們剛說(shuō)的只有第一次調(diào)用時(shí)進(jìn)行計(jì)算,而以后的調(diào)用因?yàn)閙sg沒(méi)有改變，所以直接調(diào)用了緩存的數(shù)據(jù)。

    
{{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

這就說(shuō)明了 method 相比 計(jì)算屬性 來(lái)說(shuō)，假設(shè)我們有一個(gè)性能開(kāi)銷(xiāo)比較大的的計(jì)算屬性 A，它需要遍歷一個(gè)極大的數(shù)組和做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴(lài)于 A 。如果沒(méi)有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請(qǐng)用 method 替代。

Vue 確實(shí)提供了一種更通用的方式來(lái)觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)：watch 屬性。當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí)，你很容易濫用 watch。通常更好的想法是使用 computed 屬性而不是命令式的 watch 回調(diào)。

    
{{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
        }
    }
})

然而我們會(huì)發(fā)現(xiàn)我們還可以用計(jì)算屬性來(lái)控制msg3的改變

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

當(dāng)我們使用計(jì)算屬性時(shí)，計(jì)算屬性默認(rèn)時(shí)getter（獲?。?不過(guò)我們有時(shí)還需要更改（setter）

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

當(dāng)我們?cè)诳刂婆_(tái)上輸入vm.msg3=100時(shí),msg1也會(huì)隨之改變。

雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的 watcher。

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

在這個(gè)實(shí)例中，watchers會(huì)監(jiān)聽(tīng)data里的question屬性，當(dāng)question發(fā)生改變時(shí)，answer會(huì)發(fā)生改變。
使用 watch 選項(xiàng)允許我們執(zhí)行異步操作 (訪(fǎng)問(wèn)一個(gè) API)，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這是計(jì)算屬性無(wú)法做到的。