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

1.创建局部指令

1. var app = new Vue({
2.     el: '#app',
3.     data: {    
4.     },
5.     // 创建指令(可以多个)
6.     directives: {
7.         // 指令名称
8.         dir1: {
9.             inserted(el) {
10.                 // 指令中第一个参数是当前使用指令的DOM
11.                 console.log(el);
12.                 console.log(arguments);
13.                 // 对DOM进行操作
14.                 el.style.width = '200px';
15.                 el.style.height = '200px';
16.                 el.style.background = '#000';
17.             }
18.         }
19.     }
20. })

2.全局指令

1. Vue.directive('dir2', {
2.     inserted(el) {
3.         console.log(el);
4.     }
5. })

3.指令的使用

1. <div id="app">
2.     <div v-dir1></div>
3.     <div v-dir2></div>
4. </div>
posted @ 2021-02-01 21:12  白阳の  阅读(438)  评论(0)    收藏  举报