有了后面组件、mixin的根底之后，再来理解明天小编要说的内容，就绝对容易一些，明天小编和大家一起学习Vue3中的自定义指令，咱们先来看看什么是Vue中的指令。
除了外围性能默认内置的指令 (例如 v-model 和 v-show)，Vue 也容许注册自定义指令。留神，在 Vue 中，代码复用和形象的次要模式是组件。然而，有的状况下，你依然须要对一般 DOM 元素进行底层操作，这时候就会用到自定义指令
这是一段来自Vue3官网的一段话，用来解释什么是自定义指令，自定义指令产生的起因和理论利用
理论开发中，咱们可能有这样的需要：页面中加载一个文本框，为了优化用户体验，须要在页面加载实现之后，主动获取焦点，在没有自定义指令的时候，咱们会通过原生DOM这样解决这个问题
const app = Vue.createApp({ mounted(){ this.$refs.input.focus() }, template:`<div> <input ref="input" /> </div>`})const vm = app.mount("#root")上面咱们看看在全局注册一个自定义指令是一种什么样的体验
const app = Vue.createApp({ template:`<div> <input v-focus /> </div>`})app.directive('focus',{ mounted(el){ el.focus() }})const vm = app.mount("#root")同样，咱们也能够注册一个部分的自定义指令
const directives = { focus: { mounted(el) { el.focus() } }}const app = Vue.createApp({ directives:directives, template: `<div> <input v-focus /> </div>`})const vm = app.mount("#root")这样，咱们最开始的需要是满足了，然而有的时候，咱们也想像Vue其余的指令一样，在指令前面增加指定的指，而后依据这个值相应对应的款式或者其余属性。比方咱们定义一个v-pos属性，而后元素的间隔上边距的间隔刚好是这个数字，这个时候，咱们能够写成这样
const directives = { focus: { mounted(el) { el.focus() } }}const app = Vue.createApp({ data(){ return { top:400 } }, template: `<div v-pos="top" class="header"> <input /> <button @click="top += 20">批改高度</button> </div>`})app.directive('pos',{ mounted(el, binding){ el.style.top = binding.value + 'px' }, updated(el, binding){ el.style.top = binding.value + 'px' }})const vm = app.mount("#root")解决了一个问题，然而咱们并不满足，咱们心愿依据自定义指令前面的属性不同，调整元素的款式，也就是心愿在自定义指令后跟的是left，咱们心愿就是间隔右边的间隔，同样，前面跟的是right，就是间隔右侧的间隔，咱们就能够这样
const directives = { focus: { mounted(el) { el.focus() } }}const app = Vue.createApp({ data(){ return { distance:400 } }, template: `<div v-pos:left="distance" class="header"> <input /> </div>`})app.directive('pos',(el, binding) => { console.log(binding, 'binding') // {arg: "abc",value:400} el.style[binding.arg] = binding.value + 'px'})const vm = app.mount("#root")大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈