(三)、JS 前端框架-Vue (持續學習更新ing……)
阿新 • • 發佈:2018-12-29
一、vue的例項
let vm = new Vue({
el: '',
data: function() {},
methods: {},
watch: {},
computed: {},
component: {},
template: {},
store: {},
router: function(c) {return c(com)};
});
二、vue的指令
(1)註冊指令
① 正常寫法:
//註冊一個全域性自定義指令 `v-focus`
Vue.directive('focus', {
bind: function (el, binding, vnode, oldVnode) {}, //記憶體中執行
inserted: function (el, binding, vnode, oldVnode) {}, //頁面上執行,即DOM
update: function (el, binding, vnode, oldVnode) {}, //頁面上執行,即DOM
componentUpdated: function (el, binding, vnode, oldVnode) {},
unbind: function (el, binding, vnode, oldVnode) {}
})
② 簡便寫法:
//僅用到bind和update鉤子函式,可以嘗試如下寫法(私有和全域性類似)
Vue.directive('color-swatch', function (el, binding, vnode, oldVnode) {
el.style.backgroundColor = binding.value
})
③ 定義私有指令,即區域性指令:
new Vue({
el: '#app',
data: {},
methods: {},
directives: {
'focus': {
bind: function (el, binding, vnode, oldVnode) {},
inserted: function (el, binding, vnode, oldVnode) {},
update: function (el, binding, vnode, oldVnode) {},
componentUpdated: function (el, binding, vnode, oldVnode) {},
unbind: function (el, binding, vnode, oldVnode) {}
}
}
});
(2)指令應用:
<input v-focus>
三、vue的動畫實現
1.自帶動畫效果
2.使用animate.css庫實現
3.使用鉤子函式實現
四、vue的元件
[待完善]
五、vue的路由
[待完善]
六、vue的請求
[待完善]