[Vue] Vue学习之路

v-if

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

<h2>v-if</h2>
<div id="score">
    <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:"Emilio1"},
                {score: 70, name:"Emilio2"},
                {score: 80, name:"Emilio3"},
                {score: 90, name:"Emilio4"},
                {score: 100, name:"Emilio5"}
            ],
            scoreMin: 60
        }
    });
</script>

上面的代码中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实例

实例对象的属性值

<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对象绑定上关系，这样很有可能会在不知不觉中改变了变量的值

watch

<script>
    vm.$watch('data', function(){
        console.log('Change!!!' + new Date());
    });
</script>

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

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

Vue对象的两种销毁方式

关于$destroy方法，引发的一个想法。如果把执行 $destroy 方法当做是 Vue对象的正常销毁，那如果把 Vue 对象先置空，再 delete 掉，是不是也可以完成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('Delete');
            this.solider = oldVal;
        }
    });
</script>

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

army.solider = null
Delete

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

army = null