vue--自定义指令

效果图：只是简单的演示怎么使用

image.png

全局自定义指令：
main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'animate.css'

Vue.config.productionTip = false

// 注册一个全局自定义指令
// modifiers修饰符
Vue.directive('dh', {
  inserted: function (el, bind) {
    console.log(el)
    console.table(bind)
    // el.focus()
    //  添加修饰符
    if (bind.modifiers.upper) {
      el.value = bind.value.toUpperCase()
    }
    if (bind.modifiers.trim) {
      el.value = el.value.trim()
    }
  }
})
new Vue({
  router,
  // 从根组件中植入，可以直接使用 this.$store.state获取state对象,并在子组件的computed中返回
  store,
  render: h => h(App)
}).$mount('#app')

在home.vue中使用全局自定义组件

局部自定义指令---只能在当前组件用