全局注册（main.js中注册）：
局部注册（main.js中注册）：
示例1---打开页面时，输入框自动获取焦点（全局注册，main.js）
// vue页面
<input type="text" v-focus />
// main.js
Vue.directive('focus', {
// 获取焦点
inserted(ele, binding) {
console.log(ele) // 绑定指令的元素
console.log(binding) // 指令的相关信息（指令的值等）
ele.focus() // 让元素获取焦点
},
})结果如下：
控制台打印的消息如下：
示例2--改变页面字体颜色（局部注册，在页面中注册）：
// vue页面
<h3 v-color="color">需求2：Ajax请求数据，并设计loading指令</h3>
<script>
export default {
data() {
return {
color: 'red',
}
},
directives: {
color: {
inserted(el, binding) {
el.style.color = binding.value
},
update(el, binding) {
el.style.color = binding.value
},
},
},
}
</script>结果如下：
修改color变量的值后，页面字体颜色自动更新如下
