VUE课程---23、自定义指令

一、总结

一句话总结：

vue中指令可以自定义，可以自定义全局指令和局部指令两种，局部指令就在vue实例的directives上添加，全局指令可以直接Vue.directive(指令,回调函数)

1. 注册全局指令
  Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toUpperCase()
  })
2. 注册局部指令
  directives : {
    'my-directive' : {
        bind (el, binding) {
          el.innerHTML = binding.value.toUpperCase()
        }
    }
  }
3. 使用指令
  v-my-directive='xxx'

1、定义vue全局指令实例？

全局指令定义就是Vue.directive('upper-text',回调函数)，使用就和普通指令一样

使用
<p v-upper-text="msg"></p>

定义
Vue.directive('upper-text',function (el,binding) {
  el.textContent=binding.value.toUpperCase();
});

2、定义vue局部指令实例？

局部指令的定义用vue实例的directives属性，使用和普通指令一样

使用
<p v-lower-text="msg"></p>

定义
  directives:{
      'lower-text':function (el,binding) {
          el.textContent=binding.value.toLowerCase();
      }
  }

二、自定义指令

博客对应课程的视频位置：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>自定义指令</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 1. 注册全局指令
11   Vue.directive('my-directive', function(el, binding){
12     el.innerHTML = binding.value.toUpperCase()
13   })
14 2. 注册局部指令
15   directives : {
16     'my-directive' : {
17         bind (el, binding) {
18           el.innerHTML = binding.value.toUpperCase()
19         }
20     }
21   }
22 3. 使用指令
23   v-my-directive='xxx'
24 
25 -->
26 <!--
27   需求: 自定义2个指令
28   1. 功能类型于v-text, 但转换为全大写，v-upper-text
29   2. 功能类型于v-text, 但转换为全小写，v-lower-text
30 -->
31 <div id="app1">
32     <p v-upper-text="msg"></p>
33     <p v-lower-text="msg"></p>
34 </div>
35 <div id="app2">
36     <p v-upper-text="msg"></p>
37 <!--    <p v-lower-text="msg"></p>-->
38 </div>
39 <script src="../js/vue.js"></script>
40 <script>
41     Vue.directive('upper-text',function (el,binding) {
42         console.log(el);
43         console.log(binding);
44         el.textContent=binding.value.toUpperCase();
45     });
46     let vm1 = new Vue({
47         el: '#app1',
48         data: {
49             msg: 'Just do it.'
50         },
51         directives:{
52             'lower-text':function (el,binding) {
53                 el.textContent=binding.value.toLowerCase();
54             }
55         }
56     });
57     let vm2 = new Vue({
58         el: '#app2',
59         data: {
60             msg: 'Great minds think alike.'
61         }
62     });
63     console.log(vm1);
64 </script>
65 </body>
66 </html>