Vue_自定义指令

参考：VUE官网 1、代码：

  
  自定义指令







  
  



  
  




  // 注册一个全局指令
  // el: 指令所在的标签对象
  // binding: 包含指令相关数据的容器对象
  Vue.directive('upper-text', function (el, binding) {
    console.log(el, binding)
    el.textContent = binding.value.toUpperCase()
  })
  new Vue({
    el: '#test1',
    data: {
      msg: "hello1"
    },
    // 注册局部指令，只在当前vm管理范围内有效
    directives: {
      'lower-text'(el, binding) {
        console.log(el, binding)
        el.textContent = binding.value.toLowerCase()
      }
    }

  })

  new Vue({
    el: '#test2',
    data: {
      msg: "hello2"
    }
  })

2、效果图： 1）el和binding元素分别代表什么

  // 注册一个全局指令
  // el: 指令所在的标签对象
  // binding: 包含指令相关数据的容器对象
  Vue.directive('upper-text', function (el, binding) {
    console.log(el, binding)
    el.textContent = binding.value.toUpperCase()
  })

2、全局指令和局部指令效果图