耗時近一個月,終於錄完了VUE.JS2.0前端視訊教程!

NO IMAGE

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

          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