Vue.js學(xué)習(xí)筆記（3）

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

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

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

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

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

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

1.1、Mustache語法

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

直到我查詢了這個詞的中文翻譯，才豁然開朗

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

n.胡子; 髭; 須狀物; （哺乳動物的） 觸須;

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

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

閑話不多說，下面來聊聊 ** Mustache ** 在 ** Vue ** 中的使用

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

// 第二種場景：顯示數(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需要使用 ** 三個大括號 ** 、可能叫 ** Big-Mustache ** 語法吧！

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

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

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

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

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

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

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

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

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

  • 使用方法 {{ content | 過濾器名稱 }}

下面是使用uppercase的栗子

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

效果為：

ABCDEFG

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

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

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

可能有小伙伴會問，這說出花來的東西，能不能自定義?。?/p>

答案是肯定的，不過我還沒研究到自定義。

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

1.3、指令

還記得 v-if、v-for、v-model么，原來這些以 v- 開頭的屬性，有一個專用名稱 —— 指令(Directives)

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

舉個栗子：

<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í)例對象的 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 還有縮略寫法

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

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

2、computed 屬性

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

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

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

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

<!-- 計(jì)算總分 -->
<div id="vue_demo9">
    語文：<input type="text" v-model="Chinese" number>
    數(shù)學(xué)：<input type="text" v-model="math" number>
    英語：<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>

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

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

先描述一下這個程序：

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

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

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

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

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

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

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

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

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

文章中還提到了setter方法，

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

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

這兩個方法是 ** ECMAScript 5 ** 的特性，_!

3、結(jié)語

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

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

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

王陽明老先生說的好啊，知行合一，既然道理都明白了，怎么會有做不到的道理呢？

與諸位小伙伴共勉！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容