Vue---自定义指令（一）

小案例
一：局部自定义指令
html:

//修改input框内的背景色

 export default {
    el:'app',
    directives:{
            myfocus:{
                inserted (el,binding) {
                    console.log(el);
                    console.log(binding);
                    el.style.backgroundColor = '#ccc';
                }
            }
    },
  }

效果图：
二：全局自定指令
html:

////省略
export default {
    el:‘app’,
    data(){
        return {
        //定义颜色
            color:'red'
        }
    }
}

在main.js中定义全局自定义指令

`把所有的main.js都贴了出来```
//import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.use(ElementUI);

* 自定义指令  有用的只有下面这个
* mycolor 是自定义name，把它放到html中，

Vue.directive('mycolor',{
  inserted (el,binding) {
  //这里我使用了binding，所以要在使用到的组件
  //内部，定义一个color,才能显示
    el.style.color = binding.value;
  }
})
// Vue.use(echarts);


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

`
input 内部的标识已经变成红色
效果图