vue中的自定义指令

自定义的指令，可以封装一些dom操作，扩展额外功能

全局注册

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
Vue.directive("指令名",{
//inserted表示当前绑定的元素被添加到页面时，会自动调用 括号里面的el拿到指令绑定的元素
  inserted(el){
    console.log(el);
    el.focus()
  }
})
new Vue({
  render: h => h(App),
}).$mount('#app')

 局部注册

<template>
  <div>
    <h1>自定义指令</h1>
    <input v-focus ref="inp" type="text" />
  </div>
</template>

<script>
export default {
  // mounted() {
  //   this.$refs.inp.focus();
  // },
  directives:{
    '指令名':{
      inserted(el){
      //可以对el标签，扩展额外功能
        el.focus()
      }
    }
  }
};
</script>

<style>
</style>