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>
