耗時近一個月，終於錄完了VUE.JS2.0前端視頻教程！

  此次課錄製的比較辛苦，聖誕節時本來已經快錄製完成了，偶然的一次，播放了一下，感受不滿意，好幾篇推倒重來，因此今天才結束。

          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