Vue自定义指令

自定义指令

vue中凡是 v- 开头的行内属性，都被认为是指令，不同的指令可以完成或实现不同的功效。vue自带的指令有时候无法满足实际需求，这时就需要我们自己“创建”指令，也就是自定义指令。 自定义指令分为全局自定义指令和局部自定义指令。

全局自定义指令

全局自定义指令： Vue.directive(指令名, function(el,obj){...}) 适用范围：整个项目中都可以使用

// 例如
Vue.directive('color', function(el, obj){
  // 用了几次v-color，就触发几次这个函数
  // el是使用了该指令的DOM元素，obj是该指令的一些信息，
  //如果使用v-color="xx"，那obj中会有一个属性value，值就是指令后面跟的值；如果只是v-color，则obj没有value属性
  // console.log(this); // window
  console.log(el, obj);
  el.style.color = obj.value || 'red';
  });

<h4 v-color='"blue"'>哈哈哈哈哈</h4>
<div v-color>啦啦啦啦</div>

局部自定义指令

局部自定义指令： directives:{ 指令名(el, obj){ // 指令可以完成的事 } }

    let vm = new Vue({
    el: '#app',
    data: {
      name: '测试'
    },
    
    // 局部自定义指令只能用于该组件中
    directives: {
      gg(el, obj) {
        console.log('局部自定义指令', obj)
      },
      color(el, obj){ // 有局部自定义指令就用局部的，而不用全局的
        console.log('我是局部的')
      }
    }
  });

 <div id="app">
  <h1>{{name}}</h1>
  <h4 v-color='"blue"'>哈哈哈哈哈</h4>
  <div v-color>啦啦啦啦</div>

  <p v-gg='123'></p>
</div>