? fengyu學(xué)習(xí)
端午節(jié)最后一天想帅，堅持就是勝利场靴。
開始 ** Vue.js ** 的第三次學(xué)習(xí)吧！
本次學(xué)習(xí)主要內(nèi)容： ** 再探數(shù)據(jù)綁定 ** 博脑、 ** computed屬性 **
1憎乙、再探數(shù)據(jù)綁定
在 ** MVVM ** 框架中，** Data Bindings ** 可是重中之重叉趣，盡管我們已經(jīng)了解了一些數(shù)據(jù)綁定的寫法泞边，但是還有一些需要補充的新知識！
1.1疗杉、Mustache語法
當(dāng)我看到這個詞的時候阵谚，我的內(nèi)心是疑惑的，為什么將 ** 雙大括號 ** 即 {{ content }} 這種語法稱之為 ** Mustache ** 語法烟具。
直到我查詢了這個詞的中文翻譯梢什，才豁然開朗
mustache 英[m?'stɑ:?] 美[?m?s?t??, m??st??]
n.胡子; 髭; 須狀物; （哺乳動物的） 觸須;
這個 ** 胡子 ** 這個形象的比喻， 把 ** 雙大括號 ** 形容的十分恰當(dāng)朝聋。
盡管糾結(jié)名詞叫法并沒有什么實際意義嗡午，但是也給學(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表達式使用" }}
</div>
<script>
var demo3 = new Vue({
el: '#vue_demo3',
data: {
content: 'Mustache'
}
})
</script>
注意 : 僅能夠使用 單個 表達式，不能用多條語句
還有一種方式腊尚，稱為 綁定過濾器 吨拗，由于之前沒有接觸過，所以單獨起一個小標(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ā)揮很強的功效携龟，但是我發(fā)現(xiàn)了他的 兩 個優(yōu)點
filter 不會改變 Vue 對象中數(shù)據(jù)的值兔跌，他只會按照定義的規(guī)則，來顯示數(shù)據(jù)峡蟋。這一點非常符合 M 與 V 分離的思想。
filter 是具備 復(fù)用性 的华望，這樣可以大大的提升開發(fā)的效率蕊蝗，避免代碼冗余。
可能有小伙伴會問赖舟，這說出花來的東西蓬戚，能不能自定義啊宾抓！
答案是肯定的子漩，不過我還沒研究到自定義。
而且據(jù)最近看的一些資料石洗，Vue2.0 會取消過濾器幢泼，我沒有驗證這個觀點的真實性。所以自定義放到以后再聊讲衫！
1.3缕棵、指令
還記得 v-if、v-for涉兽、v-model么，原來這些以 v- 開頭的屬性，有一個專用名稱 —— 指令(Directives)
而如 v-on:click 冒號后面的怔蚌，被稱為 指令 的 參數(shù) 怎棱，** 參數(shù) ** 是用來告訴 ** Vue ** 對象，該屬性應(yīng)該和 ** HTML ** 的什么屬性進行綁定
舉個栗子：
<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 實例對象的 url 屬性進行了關(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 實例對象有helloVue這個方法
2、computed 屬性
computed 顧名思義：計算食零。
當(dāng)我了解這個屬性的作用時困乒，簡直太佩服作者的奇思妙想了，如此牛X的一個屬性贰谣，給我們帶來了好大的便捷娜搂。
computed的作用：當(dāng)數(shù)據(jù)中有參數(shù)的值，會隨著多個其他參數(shù)的值變化時吱抚，使用computed屬性百宇，能快捷的實現(xiàn)兩者的關(guān)聯(lián)。
有點拗口秘豹，究竟是什么意思呢携御，舉個計算總分的例子，您看完后既绕，肯定和我一樣啄刹，會覺得computed簡直神了！
<!-- 計算總分 -->
<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é)或是英語中，任何一項的值怎炊，總分都會重新計算
語文：100 數(shù)學(xué)：100 英語：80 總分：280
先描述一下這個程序：
使用
v-model完成了語文谭企、數(shù)學(xué)、英語成績與 Vue實例對象 的雙向綁定使用
computed屬性评肆，將總分score作為一個計算屬性债查，值等于this.Chinese + this.math + this.English三門成績之和computed方法在 Vue實例對象 生命周期的beforeCompile后，會觸發(fā)一次瓜挽，之后盹廷，當(dāng)計算值中的屬性改變時，會再次進行計算
再對比一下久橙，如果使用原生js來實現(xiàn)這段代碼俄占，兩者的工作量，真的天差地別淆衷。
我是根據(jù)缸榄，計算屬性這一章，來學(xué)習(xí)的computed屬性
文章中有提到 $watch 與 computed 的對比祝拯，大贊 computed 在多屬性變更下甚带，更為出彩的表現(xiàn)她肯！
個人認(rèn)為（沒有看過源碼，YY的）鹰贵，computed 和 $watch 在原理層面應(yīng)該是相差無幾的晴氨，主要是 computed 強調(diào)的是 計算，而 watch 強調(diào)的是 監(jiān)控 碉输。
我不知道是否 computed 屬性只是一個 多層監(jiān)控 的封裝籽前，這可以以后再研究。
現(xiàn)在需要掌握的是敷钾，如何將兩者帶給我們的便捷枝哄，應(yīng)用在具體的場景中，達到 物盡其用闰非、人盡其才 的目的
文章中還提到了setter方法膘格，
由于暫時沒有想到太好的例子，我就直接傳送門了計算屬性的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ù)即可，不思進取的心態(tài)嚣州，正在漸漸扭轉(zhuǎn)鲫售。
明天又要上班了，希望可以把這個系列的學(xué)習(xí)筆記该肴，堅持寫完情竹。
王陽明老先生說的好啊，知行合一匀哄，既然道理都明白了秦效，怎么會有做不到的道理呢？
與諸位小伙伴共勉涎嚼！
