? fengyu學(xué)習(xí)

端午節(jié)最后一天，堅(jiān)持就是勝利。

開(kāi)始 ** Vue.js ** 的第三次學(xué)習(xí)吧！

本次學(xué)習(xí)主要內(nèi)容： ** 再探數(shù)據(jù)綁定 ** 、 ** computed屬性 **

1、再探數(shù)據(jù)綁定

在 ** MVVM ** 框架中，** Data Bindings ** 可是重中之重，盡管我們已經(jīng)了解了一些數(shù)據(jù)綁定的寫(xiě)法，但是還有一些需要補(bǔ)充的新知識(shí)！

1.1、Mustache語(yǔ)法

當(dāng)我看到這個(gè)詞的時(shí)候，我的內(nèi)心是疑惑的，為什么將 ** 雙大括號(hào) ** 即 {{ content }} 這種語(yǔ)法稱(chēng)之為 ** Mustache ** 語(yǔ)法。

直到我查詢(xún)了這個(gè)詞的中文翻譯，才豁然開(kāi)朗

mustache 英[m?'stɑ:?] 美[?m?s?t??, m??st??]

n.胡子; 髭; 須狀物; （哺乳動(dòng)物的） 觸須;

這個(gè) ** 胡子 ** 這個(gè)形象的比喻， 把 ** 雙大括號(hào) ** 形容的十分恰當(dāng)。

盡管糾結(jié)名詞叫法并沒(méi)有什么實(shí)際意義，但是也給學(xué)習(xí)過(guò)程平添了不少意外之喜！

閑話(huà)不多說(shuō)，下面來(lái)聊聊 ** Mustache ** 在 ** Vue ** 中的使用

// 第一種場(chǎng)景：普通使用
<div id="vue_demo1">
    {{ content }}
</div>
<script>
    var demo1 = new Vue({
        el: '#vue_demo1',
        data: {
            content: 'Mustache普通使用'
        }
    })
</script>

// 第二種場(chǎng)景：顯示數(shù)據(jù)中的html
<div id="vue_demo2">
    {{{ content }}}
</div>
<script>
    var demo2 = new Vue({
        el: '#vue_demo2',
        data: {
            content: '<p style="color:red">Mustache顯示HTML</p>'
        }
    })
</script>

注意 ：顯示數(shù)據(jù)中的html需要使用 ** 三個(gè)大括號(hào) ** 、可能叫 ** Big-Mustache ** 語(yǔ)法吧！

PS :千萬(wàn)不要直接使用此語(yǔ)法顯示用戶(hù)提交的內(nèi)容，可能會(huì)導(dǎo)致 XSS 攻擊

// 第三種場(chǎng)景：在Mustache語(yǔ)法中，可以解析js
<div id="vue_demo3">
    {{ content + " Javascript表達(dá)式使用" }}
</div>
<script>
    var demo3 = new Vue({
        el: '#vue_demo3',
        data: {
            content: 'Mustache'
        }
    })
</script>

注意 : 僅能夠使用 單個(gè) 表達(dá)式，不能用多條語(yǔ)句

還有一種方式，稱(chēng)為 綁定過(guò)濾器 ，由于之前沒(méi)有接觸過(guò)，所以單獨(dú)起一個(gè)小標(biāo)題，講講內(nèi)置的過(guò)濾器！

1.2、內(nèi)置過(guò)濾器 filter

學(xué)習(xí)中發(fā)現(xiàn)了3個(gè) Vue 內(nèi)置的過(guò)濾器

• uppercase 將數(shù)據(jù)中的字母均顯示為大寫(xiě)字母

• lowercase 將數(shù)據(jù)中的字母均顯示為小寫(xiě)字母

• capitalize 將數(shù)據(jù)中的首字母顯示為大寫(xiě)字母

• 使用方法 {{ content | 過(guò)濾器名稱(chēng) }}

下面是使用uppercase的栗子

<div id="vue_demo4">
    {{ content | uppercase}}
</div>
<script>
    var demo4 = new Vue({
        el: '#vue_demo4',
        data: {
            content: 'abcdefg'
        }
    })
</script>

效果為：

ABCDEFG

盡管在示例中，filter 并沒(méi)有發(fā)揮很強(qiáng)的功效，但是我發(fā)現(xiàn)了他的 兩 個(gè)優(yōu)點(diǎn)

• filter 不會(huì)改變 Vue 對(duì)象中數(shù)據(jù)的值，他只會(huì)按照定義的規(guī)則，來(lái)顯示數(shù)據(jù)。這一點(diǎn)非常符合 M 與 V 分離的思想。

• filter 是具備 復(fù)用性 的，這樣可以大大的提升開(kāi)發(fā)的效率，避免代碼冗余。

可能有小伙伴會(huì)問(wèn)，這說(shuō)出花來(lái)的東西，能不能自定義啊！

答案是肯定的，不過(guò)我還沒(méi)研究到自定義。

而且據(jù)最近看的一些資料，Vue2.0 會(huì)取消過(guò)濾器，我沒(méi)有驗(yàn)證這個(gè)觀(guān)點(diǎn)的真實(shí)性。所以自定義放到以后再聊！

1.3、指令

還記得 v-if、v-for、v-model么，原來(lái)這些以 v- 開(kāi)頭的屬性，有一個(gè)專(zhuān)用名稱(chēng) —— 指令(Directives)

而如 v-on:click 冒號(hào)后面的，被稱(chēng)為　指令　的 參數(shù) ，** 參數(shù) ** 是用來(lái)告訴 ** Vue ** 對(duì)象，該屬性應(yīng)該和 ** HTML ** 的什么屬性進(jìn)行綁定

舉個(gè)栗子：

<div id="vue_demo5">
    <a v-bind:href="url">Vue指令</a>
</div>
<script>
    var demo5 = new Vue({
        el: '#vue_demo5',
        data: {
            url: 'http://cn.vuejs.org/guide/syntax.html#指令'
        }
    })
</script>

v-bind 指令的參數(shù)為 href ，即將 A 元素的 href 屬性與 Vue 實(shí)例對(duì)象的 url 屬性進(jìn)行了關(guān)聯(lián)

v-bind 指令后面，不僅可以跟著參數(shù)，還可以添加修飾符，還是剛才的栗子：

<div id="vue_demo6">
    <a v-bind:href.literal="http://cn.vuejs.org/guide/syntax.html#指令">Vue指令</a>
</div>
<script>
    var demo6 = new Vue({
        el: '#vue_demo6'
    })
</script>

當(dāng)參數(shù)后，以 ** . + 修飾符 ** 的形式，添加了 literal 修飾符后，A 元素綁定的 href 屬性值，就可以直接使用字符串了！

此外，v-bind 與 v-on 還有縮略寫(xiě)法

• v-bind 直接使用 : 連接參數(shù)即可,如<a :href.literal='http://cn.vuejs.org/guide/syntax.html#v-bind-縮寫(xiě)'></a>

• v-on 直接使用 @ 連接參數(shù)即可，如<a @click="helloVue">v-on縮寫(xiě)</a>，前提是 Vue 實(shí)例對(duì)象有 helloVue 這個(gè)方法

2、computed 屬性

computed 顧名思義：計(jì)算。

當(dāng)我了解這個(gè)屬性的作用時(shí)，簡(jiǎn)直太佩服作者的奇思妙想了，如此牛X的一個(gè)屬性，給我們帶來(lái)了好大的便捷。

computed的作用：當(dāng)數(shù)據(jù)中有參數(shù)的值，會(huì)隨著多個(gè)其他參數(shù)的值變化時(shí)，使用computed屬性，能快捷的實(shí)現(xiàn)兩者的關(guān)聯(lián)。

有點(diǎn)拗口，究竟是什么意思呢，舉個(gè)計(jì)算總分的例子，您看完后，肯定和我一樣，會(huì)覺(jué)得computed簡(jiǎn)直神了！

<!-- 計(jì)算總分 -->
<div id="vue_demo9">
    語(yǔ)文：<input type="text" v-model="Chinese" number>
    數(shù)學(xué)：<input type="text" v-model="math" number>
    英語(yǔ)：<input type="text" v-model="English" number>
    總分：<label>{{score}}</label>
</div>
<script>
    var demo9 = new Vue({
        el: '#vue_demo9',
        data:{
            Chinese: 100,
            math: 90,
            English: 80
        },
        computed: {
            score: function(){
                return this.Chinese + this.math + this.English;
            }
        }
    })
</script>

這個(gè)程序會(huì)產(chǎn)生如下效果，改變語(yǔ)文、數(shù)學(xué)或是英語(yǔ)中，任何一項(xiàng)的值，總分都會(huì)重新計(jì)算

語(yǔ)文：100 數(shù)學(xué)：100 英語(yǔ)：80 總分：280

先描述一下這個(gè)程序：

• 使用 v-model 完成了語(yǔ)文、數(shù)學(xué)、英語(yǔ)成績(jī)與 Vue實(shí)例對(duì)象 的雙向綁定

• 使用 computed 屬性，將總分 score 作為一個(gè)計(jì)算屬性，值等于 this.Chinese + this.math + this.English 三門(mén)成績(jī)之和

• computed 方法在 Vue實(shí)例對(duì)象 生命周期的 beforeCompile 后，會(huì)觸發(fā)一次，之后，當(dāng)計(jì)算值中的屬性改變時(shí)，會(huì)再次進(jìn)行計(jì)算

再對(duì)比一下，如果使用原生js來(lái)實(shí)現(xiàn)這段代碼，兩者的工作量，真的天差地別。

我是根據(jù)，計(jì)算屬性這一章，來(lái)學(xué)習(xí)的computed屬性

文章中有提到 $watch 與 computed 的對(duì)比，大贊 computed 在多屬性變更下，更為出彩的表現(xiàn)！

個(gè)人認(rèn)為（沒(méi)有看過(guò)源碼，YY的），computed 和 $watch 在原理層面應(yīng)該是相差無(wú)幾的，主要是 computed 強(qiáng)調(diào)的是 計(jì)算，而 watch 強(qiáng)調(diào)的是 監(jiān)控 。

我不知道是否 computed 屬性只是一個(gè) 多層監(jiān)控 的封裝，這可以以后再研究。

現(xiàn)在需要掌握的是，如何將兩者帶給我們的便捷，應(yīng)用在具體的場(chǎng)景中，達(dá)到 物盡其用、人盡其才 的目的

文章中還提到了setter方法，

由于暫時(shí)沒(méi)有想到太好的例子，我就直接傳送門(mén)了計(jì)算屬性的set方法

不過(guò)從這，也可以發(fā)現(xiàn)為什么 Vue.js 只能支持 IE9+ 瀏覽器的其中一個(gè)原因了，使用了 set 和 get 訪(fǎng)問(wèn)器。

這兩個(gè)方法是 ** ECMAScript 5 ** 的特性，^_!

3、結(jié)語(yǔ)

** Vue ** 的基礎(chǔ)知識(shí)學(xué)習(xí)也有 1/3 了，這門(mén) MVVM 框架語(yǔ)言，帶給了我很多驚喜。

從 java web 轉(zhuǎn)到前端開(kāi)發(fā)，也有一年的時(shí)間了。原來(lái)頗有些完成任務(wù)即可，不思進(jìn)取的心態(tài)，正在漸漸扭轉(zhuǎn)。

明天又要上班了，希望可以把這個(gè)系列的學(xué)習(xí)筆記，堅(jiān)持寫(xiě)完。

王陽(yáng)明老先生說(shuō)的好啊，知行合一，既然道理都明白了，怎么會(huì)有做不到的道理呢？

與諸位小伙伴共勉！