为什么要写指令?
directive 和 component 的区别是什么?
指令适合处理简单的数据和对DOM的一些操作,v-focus,v-touch这种行为的一些操作适合用指令去实现。
涉及到复杂的行为,尤其是要接受各种选项的,那么就适合在 component 中去实现
https://github.com/vuejs/vue/issues/862
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
组件中设置一个 directives 的选项
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
!function () {
let vueLazy = {};
// options vue.use(xxx,{}) 传入额外参数
vueLazy.install = function (Vue, options) {
Vue.directive('lazy', {
bind(el, binding) {
},
update(el, binding) {
},
unbind(el) {
}
});
};
if (typeof exports == "object") {
module.exports = vueLazy;
} else if (typeof define == "function" && define.amd) {
define([], function () {
return vueLazy
});
} else if (window.Vue) {
window.vueLazy = vueLazy;
Vue.use(vueLazy);
}
}();
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
Gif展示这5个的执行策略
html部分
<button @click="clickMe">click</button>
<div class="block" v-lazy:class="className" v-if="status">
father className
<div v-if="status2">
child
</div>
</div>
Js 部分
new Vue({
el: '#demo',
data: function () {
return {
className: 'customClass',
imgSrc: 'https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/gulp/gulp.png',
status: false,
status2: false
}
},
methods: {
clickMe() {
this.status = !this.status;
setTimeout(()=> {
this.status2 = !this.status2
},2000);
}
}
})