vue-自定义指令

一、简介

vue可以自定义指令。自定义指令分为：全局指令和局部指令。

二、自定义指令

1、自定义全局指令

　　使用全局API中的Vue.directive 来实现自定义全局指令。

 1     <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>自定义指令</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 <body>
10 
11     <div id="hello">
12         <!-- 使用指令的时候，必须在指令之前加v-。即格式为：v-指令ID -->
13         <h3 v-test>{{msg}}</h3>
14         <button @click='changeData'>更新数据</button>
15         <hr>
16         <h3 v-word>{{name}}</h3>
17         <h4 v-word:param.haha='userName'>{{name}}</h4>
18         <hr>
19         <h3 v-lolo>{{text}}</h3>
20     </div>
21 
22     <script>
23 
24         //自定义全局指令（注意：Vue.directive()这个方法要写在new Vue之前）
25 
26         //1.自定义全局指令test
27         Vue.directive('test',{
28             //钩子函数(可选)
29             bind(){    //常用
30                 alert('指令第一次绑定到元素上时调用，只调用一次，可以执行初始化操作');
31             },
32             inserted(){
33                 alert('指令所绑定的元素插入到DOM中时调用');
34             },
35             update(){
36                 alert('被绑定元素所在模板更新时调用');
37             },
38             componentUpdated(){
39                 alert('被绑定元素所在模板完成一次更新周期时调用');
40             },
41             unbind(){
42                 alert('指令与元素解绑时调用，只执行一次');
43             }
44         });
45 
46         //2.自定义全局指令word
47         Vue.directive('word',{
48             bind(el,binding){
49                 console.log('bind函数的参数el',el);    //el是当前指令所绑定的元素，DOM对象
50                 el.style.backgroundColor='red';    //对el进行操作
51 
52                 console.log('bind函数的参数binding',binding);    //一个对象，包含很多property
53                 console.log('指令名(不带v-)',binding.name);        //指令名(不带v-)
54                 console.log('指令名(带有v-)',binding.rawName);    //指令名(带有v-)
55                 console.log('指令的绑定值',binding.value);                //指令的绑定值
56                 console.log('指令的绑定值字符串形式',binding.expression);    //绑定值的字符串形式
57                 console.log('指令的参数',binding.arg);                    //传给指令的参数
58                 console.log('指令的包含修饰符的对象',binding.modifiers);    //一个包含修饰符的对象
59             }
60         });
61 
62         //3.自定义全局指令lolo（这是自定义全局指令的简单写法：传入一个简单的指令函数,bind和update时会调用）
63         Vue.directive('lolo',function(){
64             console.log('这是自定义全局指令的简单写法');
65         })
66 
67         //vue实例
68         let vm = new Vue({
69             el:'#hello',
70             data:{
71                 msg:'欢迎来到王者荣耀',
72                 name:'辣木阳子',
73                 userName:'方文山',
74                 text:'我们是中国人'
75             },
76             methods:{
77                 changeData(){
78                     this.msg='欢迎来到更新后的王者荣耀'
79                 }
80             },
81         });
82     </script>
83 </body>
84 </html>

2、自定义局部指令

使用选项（资源）中的directives 实现自定义局部指令。

 1     <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>自定义指令</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 <body>
10 
11     <div id="hello">
12         <!-- 使用指令的时候，必须在指令之前加v-。即格式为：v-指令ID -->
13         <input type="text" v-model='text' v-fo>
14     </div>
15 
16     <script>
17         //vue实例
18         let vm = new Vue({
19             el:'#hello',
20             data:{
21                 msg:'欢迎来到王者荣耀',
22                 name:'辣木阳子',
23                 userName:'方文山',
24                 text:'我们是中国人'
25             },
26             methods:{
27                 changeData(){
28                     this.msg='欢迎来到更新后的王者荣耀'
29                 }
30             },
31             //自定义局部指令
32             directives:{
33                 //自定义局部指令foc
34                 foc:{
35                     inserted(el){
36                         el.focus();    //实现被绑定该指令的文本框自动获得焦点
37                     }
38                 }
39             },
40         });
41     </script>
42 </body>
43 </html>

vue-自定义指令

推荐阅读