? fengyu學(xué)習(xí)
投稿首頁通過了！好開森对省，謝謝辛苦的小編，端午節(jié)還在工作晾捏！
趁熱打鐵蒿涎，開始Vue.js的第二次學(xué)習(xí)。
此次的學(xué)習(xí)內(nèi)容主要有：** Vue v-if惦辛、 Vue實例及其生命周期劳秋、Vue與MVVM ** ，_胖齐！
1玻淑、遺漏的v-if
昨天根據(jù)Vue.js起步初體驗了一把后，信心滿滿呀伙。
自以為已經(jīng)登堂入室补履，關(guān)于Vue的基礎(chǔ)知識已收入囊中，卻不料剿另，今天學(xué)習(xí)Vue.js概述時箫锤，冷不丁冒出一個 ** v-if **
這個看起來很有用的東東贬蛙，到底是何方神圣呢？
當(dāng)頁面加載了 ** Vue.js ** 后谚攒，可以在 ** DOM ** 元素上加入 ** v-if ** 屬性阳准，用于該 ** DOM ** 元素的 顯隱
一領(lǐng)會到這個屬性，居然可以控制顯隱馏臭，那真是有大大的用處澳缰啊！
舉個栗子：
我想做一個可以篩選成績的頁面位喂，顯示成績大于某個數(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:"強狗"}
],
scoreMin: 60
}
});
</script>
簡單說一下程序?qū)崿F(xiàn)的思路：
** v-for ** 實現(xiàn)列表顯示數(shù)據(jù)
** v-for ** 節(jié)點上加入 ** 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 ** 實例綁定的根節(jié)點上，否則你會看到下面這句話
[Vue warn]: v-if="XXXXX" cannot be used on an instance root element.
2规婆、Vue實例
終于把 ** v-if ** 這個隱藏關(guān)卡通關(guān)了澜躺，接下來說一下 ** Vue ** 實例對象
了解 ** Vue.js ** 基礎(chǔ)知識的同學(xué)，或多或少都已經(jīng)用過 ** Vue ** 對象了抒蚜，那他還有哪些不為人知的秘密呢掘鄙？
2.1、實例對象的屬性值
<script>
var vmData = { data: 1 };
var vm = new Vue({
el: '#vm_demo',
data: vmData
});
</script>
vm.data === vmData.date嗡髓，注意這里使用的是===vm.data === vm.$data.data操漠，自帶屬性使用$** +自帶屬性名稱 ** 引用
了解以上這兩點，就可以避免不必要的數(shù)據(jù)綁定關(guān)系饿这。
即當(dāng)一個 ** js ** 變量的初始值浊伙，是需要引用時，不建議和 ** Vue ** 對象綁定上關(guān)系长捧。
這樣很有可能會在不知不覺中改變了變量的值
2.2嚣鄙、牛X的 ** watch ** 屬性
準(zhǔn)確的說，不能稱之為屬性串结，應(yīng)該是方法更為合適一些杂抽！
<script>
vm.$watch('data', function(){
console.log('報告主人英上，有人偷偷改了data的值芒填！' + new Date());
});
</script>
當(dāng)我偷偷修改了data的值時眉撵，程序會告訴我
報告主人，有人偷偷改了data的值声功！Fri Jun 10 2016 15:09:20 GMT+0800 (中國標(biāo)準(zhǔn)時間)
哈哈烦却，突然有一種造物主的錯覺！
2.3先巴、生命周期
一提到生命周期其爵，突然感覺整個程序鮮活了起來冒冬。
** Vue ** 對象的生命周期
created -> beforeCompile -> compiled -> ready -> beforeDestroy -> destroyed
一個 ** Vue ** 對象成功創(chuàng)建，會依次執(zhí)行從
created到ready4個方法如果 ** Vue ** 實例對象只執(zhí)行了created方法摩渺，那么說明綁定的 ** DOM ** 元素沒有找到
beforeCompile和compiled暫時沒有搞清楚简烤，估計和 ** 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ā)的一個想法
如果把執(zhí)行 $destroy 方法當(dāng)做是 ** Vue ** 對象的正常死亡
那如果把 ** Vue ** 對象先置空，再 delete 掉绰姻，是不是瞞天過海的完成了他殺
結(jié)果居然是：真正的枉侧，毫無痕跡的，完成了 ** Vue ** 對象的銷毀狂芋！
作為一名有情懷的程序員榨馁，我覺得增加一個監(jiān)控小隊，防止我親愛的 ** 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('報告主人帜矾，我方軍隊被摧毀翼虫，正在重新恢復(fù)！');
this.solider = oldVal;
}
});
</script>
當(dāng)我們對army.solider進(jìn)行置空操作時屡萤，的確會被監(jiān)控到珍剑，然后重新恢復(fù) ** solider ** 的值
army.solider = null
報告主人，我方軍隊被摧毀死陆，正在重新恢復(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)聽封裝操作
框架的主要作用是實現(xiàn) ** ViewModel ** 翔曲， 搭建起了 ** M ** 與 ** V ** 之間的橋梁
個人對于 ** MVVM ** 是這么理解的迫像，** M ** 代表了從服務(wù)端千里迢迢趕來的數(shù)據(jù)劈愚，** V ** 代表了最終想呈現(xiàn)的效果
我們不愿意看到 ** M ** 和 ** V ** 糾纏不清瞳遍，所以創(chuàng)造了 ** VM ** , 他的角色是告訴 ** M ** 你只管把拿來的數(shù)據(jù)存放好就行了，告訴 ** V ** 你只管顯示我給你的東西就行了菌羽。然后自己一個人默默地處理數(shù)據(jù)掠械，反饋交互。多么的無私注祖，多么的偉大盎佟！
4是晨、結(jié)語
總結(jié)一下今天的學(xué)習(xí)內(nèi)容
v-if 顯隱神器
$watch 監(jiān)控神器
Vue 的生命周期
傳說中的MVVM是什么肚菠。和Vue是什么關(guān)系
非常開心，今天能夠堅持學(xué)習(xí)罩缴，希望放假結(jié)束后蚊逢，也能好好的學(xué)技術(shù)层扶，踏踏實實做事！
