? fengyu學(xué)習(xí)
投稿首頁通過了！好開森，謝謝辛苦的小編，端午節(jié)還在工作！
趁熱打鐵，開始Vue.js的第二次學(xué)習(xí)。
此次的學(xué)習(xí)內(nèi)容主要有：** Vue v-if、 Vue實(shí)例及其生命周期、Vue與MVVM ** ，_！
1、遺漏的v-if
昨天根據(jù)Vue.js起步初體驗(yàn)了一把后，信心滿滿。
自以為已經(jīng)登堂入室，關(guān)于Vue的基礎(chǔ)知識(shí)已收入囊中，卻不料，今天學(xué)習(xí)Vue.js概述時(shí)，冷不丁冒出一個(gè) ** v-if **
這個(gè)看起來很有用的東東，到底是何方神圣呢？
當(dāng)頁面加載了 ** Vue.js ** 后，可以在 ** DOM ** 元素上加入 ** v-if ** 屬性，用于該 ** DOM ** 元素的 顯隱
一領(lǐng)會(huì)到這個(gè)屬性，居然可以控制顯隱，那真是有大大的用處啊！
舉個(gè)栗子：
我想做一個(gè)可以篩選成績的頁面，顯示成績大于某個(gè)數(shù)的人員列表及分?jǐn)?shù)
<h2>基于v-if的成績篩選器</h2>
<div id="score_demo">
<input type="text" placeholder="您可以接受的最低分?jǐn)?shù)是" v-model="scoreMin">
<p v-for="data in scoreArr" v-if="data.score >= scoreMin">
{{data.name}} : {{data.score}}
</p>
</div>
<script>
var scorevm = new Vue({
el: '#score_demo',
data: {
scoreArr: [
{score: 60, name:"封小胖"},
{score: 70, name:"三哥"},
{score: 80, name:"四哥"},
{score: 90, name:"七弟"},
{score: 100, name:"強(qiáng)狗"}
],
scoreMin: 60
}
});
</script>
簡單說一下程序?qū)崿F(xiàn)的思路：
** v-for ** 實(shí)現(xiàn)列表顯示數(shù)據(jù)
** v-for ** 節(jié)點(diǎn)上加入 ** v-if ** 判斷
scoreMin默認(rèn)值設(shè)為60，使用 ** v-model ** 與 ** input ** 形成雙向綁定條件判斷邏輯：
data.score > scoreMin，其中data.score是 ** v-for ** 中scoreArr數(shù)據(jù)源枚舉出的對象data的score值
如此一來，就可以輕松的篩選出成績達(dá)標(biāo)者。
** PS ** : 不要把 ** v-if ** 放在 ** Vue ** 實(shí)例綁定的根節(jié)點(diǎn)上，否則你會(huì)看到下面這句話
[Vue warn]: v-if="XXXXX" cannot be used on an instance root element.
2、Vue實(shí)例
終于把 ** v-if ** 這個(gè)隱藏關(guān)卡通關(guān)了，接下來說一下 ** Vue ** 實(shí)例對象
了解 ** Vue.js ** 基礎(chǔ)知識(shí)的同學(xué)，或多或少都已經(jīng)用過 ** Vue ** 對象了，那他還有哪些不為人知的秘密呢？
2.1、實(shí)例對象的屬性值
<script>
var vmData = { data: 1 };
var vm = new Vue({
el: '#vm_demo',
data: vmData
});
</script>
vm.data === vmData.date，注意這里使用的是===vm.data === vm.$data.data，自帶屬性使用$** +自帶屬性名稱 ** 引用
了解以上這兩點(diǎn)，就可以避免不必要的數(shù)據(jù)綁定關(guān)系。
即當(dāng)一個(gè) ** js ** 變量的初始值，是需要引用時(shí)，不建議和 ** Vue ** 對象綁定上關(guān)系。
這樣很有可能會(huì)在不知不覺中改變了變量的值
2.2、牛X的 ** watch ** 屬性
準(zhǔn)確的說，不能稱之為屬性，應(yīng)該是方法更為合適一些！
<script>
vm.$watch('data', function(){
console.log('報(bào)告主人，有人偷偷改了data的值！' + new Date());
});
</script>
當(dāng)我偷偷修改了data的值時(shí)，程序會(huì)告訴我
報(bào)告主人，有人偷偷改了data的值！Fri Jun 10 2016 15:09:20 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
哈哈，突然有一種造物主的錯(cuò)覺！
2.3、生命周期
一提到生命周期，突然感覺整個(gè)程序鮮活了起來。
** Vue ** 對象的生命周期
created -> beforeCompile -> compiled -> ready -> beforeDestroy -> destroyed
一個(gè) ** Vue ** 對象成功創(chuàng)建，會(huì)依次執(zhí)行從
created到ready4個(gè)方法如果 ** Vue ** 實(shí)例對象只執(zhí)行了created方法，那么說明綁定的 ** DOM ** 元素沒有找到
beforeCompile和compiled暫時(shí)沒有搞清楚，估計(jì)和 ** template ** 屬性有關(guān)，以后再研究
<script>
var vm = new Vue({
el: '#vm',
created: function(){
console.log('create');
},
beforeCompile: function(){
console.log('beforeCompile');
},
compiled: function(){
console.log('compiled');
},
ready: function(){
console.log('ready');
},
beforeDestroy: function(){
console.log('beforeDestroy');
},
destroyed: function(){
console.log('destroyed');
},
});
</script>
2.4、Vue對象的2種死法
關(guān)于 ** $destroy ** 方法，引發(fā)的一個(gè)想法
如果把執(zhí)行 $destroy 方法當(dāng)做是 ** Vue ** 對象的正常死亡
那如果把 ** Vue ** 對象先置空，再 delete 掉，是不是瞞天過海的完成了他殺
結(jié)果居然是：真正的，毫無痕跡的，完成了 ** Vue ** 對象的銷毀！
作為一名有情懷的程序員，我覺得增加一個(gè)監(jiān)控小隊(duì)，防止我親愛的 ** Vue ** 對象被神不知鬼不覺的被干掉
我嘗試了下面這段程序
<script>
// 監(jiān)控
var army = {
solider: new Vue()
}
var vmWatch = new Vue({
data : army
});
vmWatch.$watch('solider', function(newVal, oldVal){
if(this.solider == null){
console.log('報(bào)告主人，我方軍隊(duì)被摧毀，正在重新恢復(fù)！');
this.solider = oldVal;
}
});
</script>
當(dāng)我們對army.solider進(jìn)行置空操作時(shí)，的確會(huì)被監(jiān)控到，然后重新恢復(fù) ** solider ** 的值
army.solider = null
報(bào)告主人，我方軍隊(duì)被摧毀，正在重新恢復(fù)！
但是如果直接摧毀掉 army ,那就真的無力回天了
army = null
Game Over
3、Vue與MVVM
** MVVM ** 是 ** Model - View - ViewModel ** 的縮寫
圖片來源：Vue概述
根據(jù)圖片描述
M 代表 ** Plain Javascript Objects ** 簡單的 ** js ** 對象
V 代表 ** DOM ** 顯示
VM 代表 ** Vue ** 框架中的數(shù)據(jù)綁定和對象監(jiān)聽封裝操作
框架的主要作用是實(shí)現(xiàn) ** ViewModel ** ， 搭建起了 ** M ** 與 ** V ** 之間的橋梁
個(gè)人對于 ** MVVM ** 是這么理解的，** M ** 代表了從服務(wù)端千里迢迢趕來的數(shù)據(jù)，** V ** 代表了最終想呈現(xiàn)的效果
我們不愿意看到 ** M ** 和 ** V ** 糾纏不清，所以創(chuàng)造了 ** VM ** , 他的角色是告訴 ** M ** 你只管把拿來的數(shù)據(jù)存放好就行了，告訴 ** V ** 你只管顯示我給你的東西就行了。然后自己一個(gè)人默默地處理數(shù)據(jù)，反饋交互。多么的無私，多么的偉大啊！
4、結(jié)語
總結(jié)一下今天的學(xué)習(xí)內(nèi)容
v-if 顯隱神器
$watch 監(jiān)控神器
Vue 的生命周期
傳說中的MVVM是什么。和Vue是什么關(guān)系
非常開心，今天能夠堅(jiān)持學(xué)習(xí)，希望放假結(jié)束后，也能好好的學(xué)技術(shù)，踏踏實(shí)實(shí)做事！
