[Vue] Vue学习之路

v-if

当页面加载了Vue.js后，可以在DOM元素上加入v-if属性，用于该DOM元素的显示与隐藏

v-if

    
    

        {{data.name}} : {{data.score}}
    

上面的代码中v-for实现列表显示数据，v-for节点上加入v-if判断，scoreMin默认值设为60，使用v-model与input形成双向绑定。
条件判断逻辑：data.score > scoreMin，其中data.score是v-for中scoreArr数据源枚举出的对象data的score值。
如此一来，就可以轻松的筛选出成绩大于60的人显示出来。

需要注意的是: 不要把v-if放在 Vue 实例绑定的根节点上，否则你会看到下面的报错。

[Vue warn]: v-if="XXXXX" cannot be used on an instance root element.

Vue实例

实例对象的属性值

vm.data === vmData.date，注意这里使用的是 ===
vm.data === vm.$data.data，自带属性使用 $ +自带属性名称

了解以上这两点，就可以避免不必要的数据绑定关系。即当一个js变量的初始值，是需要引用时，不建议和Vue对象绑定上关系，这样很有可能会在不知不觉中改变了变量的值

watch

当data的值发生改变时，会触发它对应的watch方法

Change!!! Fri Jun 10 2016 15:09:20 GMT+0800 (中国标准时间)

Vue对象的两种销毁方式

关于$destroy方法，引发的一个想法。如果把执行 $destroy 方法当做是 Vue对象的正常销毁，那如果把 Vue 对象先置空，再 delete 掉，是不是也可以完成Vue对象的销毁。结果证明是可以的。

当我们对army.solider进行置空操作时，的确会被监控到，然后重新恢复 solider的值

army.solider = null
Delete

但是如果直接摧毁掉 army，整个对象就销毁了。

army = null