About Vue.directive global vue of modular instruction

index.vue

<input id="keywords" v-show="bState" type="text" placeholder="请输入" v-c-color="color">
    <button @click="Btnclick" v-c-font="cfont">按钮</button>

 

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import cdire from './utils/directive/index'

console.log('cdire', cdire)
Vue.config.productionTip = false
Vue.prototype.eventBus = new Vue()
/* eslint-disable no-new */
const directive = {
  'c-color': cdire.cdirective,
  'c-font': cdire.cfont,
}
Object.keys(directive).forEach(key => {
  Vue.directive(key, directive[key])
  console.log(key)
})

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

utils/directive/index

export default {
  cdirective(el, data, vnode) {
    el.style['color'] = data.value;
  },
  cfont(el, data, vnode) {
    el.style.fontSize = data.value;
    console.log(el);
    console.log(data);
    console.log(vnode);
  }
}

The first to export default, main value printed inside cdire