Vue-自定义指令

时间:2021-2-20 作者:admin

自定义指令

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>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。