vue自定义指令 html,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 内部的标识已经变成红色

效果图