vue自定义指令

除了核心功能默认内置的指令(v-model和v-show)，vue允许我们注册自定义指令。 v-xxxx

html+css的复用的主要形式是组件

你需要对普通DOM元素进行底层操作，这时候就会用到自定义指令

目标：获取标签 扩展额外的功能

局部注册和使用

只能在当前组件中使用

<template>
  <div>
    <div class="main">
      <input type="text" v-focus />
    </div>
  </div>
</template>

<script>
/*
局部指令
directives:{
  '指令名':{
     bind(el,binding,vnode){},
     inserted(el,binding,vnode){}
  }
}

在标签上使用自定义指令  v-指令名

inserted 指令所在标签 被插入到页面上触发(一次)
update  指令对应的数据/标签更新时  触发
*/
export default {
  directives: {
    // 页面加载时获取焦点
    focus: {
      inserted(el, binding, vnode) {
        // console.log(el)
        el.focus()
      },
    },
  },
}
</script>

全局注册和使用

在任何的.vue文件中使用

main.js中用Vue.directive 全局注册指令

// 全局注册
Vue.directive('gfocus', {
  inserted(el) {
    el.focus()
  },
})

自定义指令-传值

使用自定义指令，传入一个值

需求:定义color指令，传入一个颜色，给标签设置文字颜色

<template>
  <div>
    <div class="main">
      <input type="text" v-focus />
      <input type="text" v-gfocus />
    </div>
    <p v-color="theColor" @click="changeColor">修改文字颜色</p>
  </div>
</template>

<script>
/*
局部指令
directives:{
  '指令名':{
     bind(el,binding,vnode){},
     inserted(el,binding,vnode){}
  }
}

在标签上使用自定义指令  v-指令名

inserted 指令所在标签 被插入到页面上触发(一次)
update  指令对应的数据/标签更新时  触发
*/
export default {
  data() {
    return {
      theColor: 'blue',
    }
  },
  methods: {
    changeColor() {
      this.theColor = 'yellow'
    },
  },
  directives: {
    // 页面加载时获取焦点
    focus: {
      inserted(el, binding, vnode) {
        // console.log(el)
        el.focus()
      },
    },
    // 给标签设置文字颜色
    color: {
      inserted(el, binding) {
        el.style.color = binding.value
      },
      update(el, binding) {
        el.style.color = binding.value
      },
    },
  },
}
</script>