vue-cli如何新增自定义指令?

vue-cli如何新增自定义指令?
1.创建局部指令

var app = new Vue({
el: '#app',
data: { 
},
// 创建指令(可以多个)
directives: {
// 指令名称
dir1: {
inserted(el) {
// 指令中第一个参数是当前使用指令的DOM
console.log(el);
console.log(arguments);
// 对DOM进行操作
el.style.width = '200px';
el.style.height = '200px';
el.style.background = '#000';
}
}
}
})
2.全局指令

Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})
3.指令的使用

<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>

posted on 2020-01-01 23:17  zhishiyv  阅读(1399)  评论(0编辑  收藏  举报

导航