© fengyu学习
投稿首页通过了！好开森，谢谢辛苦的小编，端午节还在工作！
趁热打铁，开始Vue.js的第二次学习。
此次的学习内容主要有：** Vue v-if、 Vue实例及其生命周期、Vue与MVVM ** ，_！
1、遗漏的v-if
昨天根据Vue.js起步初体验了一把后，信心满满。
自以为已经登堂入室，关于Vue的基础知识已收入囊中，却不料，今天学习Vue.js概述时，冷不丁冒出一个 ** v-if **
这个看起来很有用的东东，到底是何方神圣呢？
当页面加载了 ** Vue.js ** 后，可以在 ** DOM ** 元素上加入 ** v-if ** 属性，用于该 ** DOM ** 元素的 显隐
一领会到这个属性，居然可以控制显隐，那真是有大大的用处啊！
举个栗子：
我想做一个可以筛选成绩的页面，显示成绩大于某个数的人员列表及分数
<h2>基于v-if的成绩筛选器</h2>
<div id="score_demo">
<input type="text" placeholder="您可以接受的最低分数是" 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>
简单说一下程序实现的思路：
** v-for ** 实现列表显示数据
** v-for ** 节点上加入 ** v-if ** 判断
scoreMin默认值设为60，使用 ** v-model ** 与 ** input ** 形成双向绑定条件判断逻辑：
data.score > scoreMin，其中data.score是 ** v-for ** 中scoreArr数据源枚举出的对象data的score值
如此一来，就可以轻松的筛选出成绩达标者。
** PS ** : 不要把 ** v-if ** 放在 ** Vue ** 实例绑定的根节点上，否则你会看到下面这句话
[Vue warn]: v-if="XXXXX" cannot be used on an instance root element.
2、Vue实例
终于把 ** v-if ** 这个隐藏关卡通关了，接下来说一下 ** Vue ** 实例对象
了解 ** Vue.js ** 基础知识的同学，或多或少都已经用过 ** 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，自带属性使用$** +自带属性名称 ** 引用
了解以上这两点，就可以避免不必要的数据绑定关系。
即当一个 ** js ** 变量的初始值，是需要引用时，不建议和 ** Vue ** 对象绑定上关系。
这样很有可能会在不知不觉中改变了变量的值
2.2、牛X的 ** watch ** 属性
准确的说，不能称之为属性，应该是方法更为合适一些！
<script>
vm.$watch('data', function(){
console.log('报告主人，有人偷偷改了data的值！' + new Date());
});
</script>
当我偷偷修改了data的值时，程序会告诉我
报告主人，有人偷偷改了data的值！Fri Jun 10 2016 15:09:20 GMT+0800 (中国标准时间)
哈哈，突然有一种造物主的错觉！
2.3、生命周期
一提到生命周期，突然感觉整个程序鲜活了起来。
** Vue ** 对象的生命周期
created -> beforeCompile -> compiled -> ready -> beforeDestroy -> destroyed
一个 ** Vue ** 对象成功创建，会依次执行从
created到ready4个方法如果 ** Vue ** 实例对象只执行了created方法，那么说明绑定的 ** DOM ** 元素没有找到
beforeCompile和compiled暂时没有搞清楚，估计和 ** template ** 属性有关，以后再研究
<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种死法
关于 ** $destroy ** 方法，引发的一个想法
如果把执行 $destroy 方法当做是 ** Vue ** 对象的正常死亡
那如果把 ** Vue ** 对象先置空，再 delete 掉，是不是瞒天过海的完成了他杀
结果居然是：真正的，毫无痕迹的，完成了 ** Vue ** 对象的销毁！
作为一名有情怀的程序员，我觉得增加一个监控小队，防止我亲爱的 ** Vue ** 对象被神不知鬼不觉的被干掉
我尝试了下面这段程序
<script>
// 监控
var army = {
solider: new Vue()
}
var vmWatch = new Vue({
data : army
});
vmWatch.$watch('solider', function(newVal, oldVal){
if(this.solider == null){
console.log('报告主人，我方军队被摧毁，正在重新恢复！');
this.solider = oldVal;
}
});
</script>
当我们对army.solider进行置空操作时，的确会被监控到，然后重新恢复 ** solider ** 的值
army.solider = null
报告主人，我方军队被摧毁，正在重新恢复！
但是如果直接摧毁掉 army ,那就真的无力回天了
army = null
Game Over
3、Vue与MVVM
** MVVM ** 是 ** Model - View - ViewModel ** 的缩写
图片来源：Vue概述
根据图片描述
M 代表 ** Plain Javascript Objects ** 简单的 ** js ** 对象
V 代表 ** DOM ** 显示
VM 代表 ** Vue ** 框架中的数据绑定和对象监听封装操作
框架的主要作用是实现 ** ViewModel ** ， 搭建起了 ** M ** 与 ** V ** 之间的桥梁
个人对于 ** MVVM ** 是这么理解的，** M ** 代表了从服务端千里迢迢赶来的数据，** V ** 代表了最终想呈现的效果
我们不愿意看到 ** M ** 和 ** V ** 纠缠不清，所以创造了 ** VM ** , 他的角色是告诉 ** M ** 你只管把拿来的数据存放好就行了，告诉 ** V ** 你只管显示我给你的东西就行了。然后自己一个人默默地处理数据，反馈交互。多么的无私，多么的伟大啊！
4、结语
总结一下今天的学习内容
v-if 显隐神器
$watch 监控神器
Vue 的生命周期
传说中的MVVM是什么。和Vue是什么关系
非常开心，今天能够坚持学习，希望放假结束后，也能好好的学技术，踏踏实实做事！
