这次课录制的比较辛苦，圣诞节时原本已经快录制完成了，偶然的一次，播放了一下，感觉不满意，好几篇推倒重来，所以今天才结束。

          vue.js2.0是Vue.JS的最新版本，视频教程还不多，如果你看到了，学到了些新知识，那么，也不枉我月余的辛苦了。

          vue.js2.0实例：

         vue2.0之vue实例生命周期     
     
beforeCreate : 组件实例刚被创建，组件属性计算之前（data等）     
created : 组件实例创建完成，属性已绑定，但DOM未生成，$el属性还不存在。     
beforeMount ： 模板编译/挂载之前     
mounted : 模板编译/挂载之后     
beforeUpdate : 组件更新之前     
updated : 组件更新之后     
activated ： for keep-alive 组件被激活时调用     
deactivated : for keep-alive 组件被移除时调用     
beforeDestroy ： 组件销毁之前     
destroyed : 组件销毁之后        
    
vue实例的属性和方法：    
_uid 
_isVue 
$options 
_renderProxy 
_self 
$parent 
$root 
$children 
$refs 
_watcher 
_inactive 
_isMounted 
_isDestroyed 
_isBeingDestroyed 
_events 
_updateListeners 
_watchers 
_data 
msg 
$vnode 
_vnode 
_staticTrees 
$slots 
$scopedSlots 
$createElement 
$el 
constructor 
_init 
$set 
$delete 
$watch 
$on 
$once 
$off 
$emit 
_mount 
_update 
_updateFromParent 
$forceUpdate 
$destroy 
$nextTick 
_render 
_h 
_s 
_n 
_e 
_q 
_i 
_m 
_o 
_f 
_l 
_t 
_b 
_k 
__patch__ 
$mount 
 
    
1.     
<template>     
<div ref='bb'>     
</div>     
</template>     
<script>     
import Vue  from 'vue';     
let myvue = {     
    created:function(){     
        alert('创建dom');     
        //look(this);     
        for(let key in vv){     
            document.write(key);     
            document.write('<br/>');     
        }     
    },     
    mounted:function(){     
        alert('加载完成');     
        //alert(this.$refs.bb);     
        //look(this)     
    }     
};     
//export default myvue;     
let vv=Vue.extend(myvue);     
export default vv;  //等价于export default myvue     
// let vv = new Vue(myvue); //只创建不加载     
// for(let key in vv){     
//     document.write(key);     
//     document.write('<br/>');     
// }     
     
注意：只有mount完成后Vue实例才有el     
     
2.$el功能     
let v1 = new Vue({     
            el:'#div1'     
        });     
v1.$el.hidden=true;     
for(let key in v1.$el){     
    console.log(key);     
}     
3.     
var app = new Vue({     
    data: {     
        message : ''     
    }     
})     
可以直接通过:     
app.message = 'xxx' //赋值     
来改变data中出现的属性， 从而引发视图的变化。      
     
注意只有这些被代理的属性是响应的。      
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。     
例：     
//带有前缀 $ 的属性会有特殊作用     
var data = { a: 1 }     
var vm = new Vue({     
    el: '#example',     
    data(){     
    return data;     
    }     
})     
     
vm.$data === data // -> true     
vm.$el === document.getElementById('example') // -> true     
     
vm.$watch('a', function(newVal, oldVal){     
    // 此方法在属性a改变后发生     
})     


  技术交流QQ群号: 168108911

  vue.js视频教程学习地址：http://edu.csdn.net/course/detail/3656