Vue.js学习笔记（2）

© 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 到 ready 4个方法

• 如果 ** 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概述

MVVM

根据图片描述

• 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是什么关系

非常开心，今天能够坚持学习，希望放假结束后，也能好好的学技术，踏踏实实做事！