有了前面组件和mixin的基础，今天要讲的内容就比较容易理解了。今天就和大家一起学习一下Vue3中的自定义指令。让我们先来看看Vue中的指令是什么。除了核心功能的默认内置指令（例如v-model和v-show）之外，Vue还允许注册自定义指令。请注意，在Vue中，代码重用和抽象的主要形式是组件。但是，在某些情况下，您仍然需要对普通DOM元素执行低级操作。这时候，你会使用自定义指令的原因和实际应用在实际开发中，我们可能会有这样的需求：在页面加载一个文本框。为了优化用户体验，需要在页面加载完成后自动获取焦点。当没有自定义指令时，我们会通过NativeDOM处理这个问题constapp=Vue.createApp({mounted(){this.$refs.input.focus()},template:`
`})constvm=app.mount("#root")让我们看看全局注册一个自定义指令是什么感觉constapp=Vue.createApp({template:`
`})app.directive('focus',{mounted(el){el.focus()}})constvm=app.mount("#root")同样，我们也可以注册部分自定义指令constdirectives={focus:{mounted(el){el.focus()}}}constapp=Vue.createApp({directives:directives,template:`
`})constvm=app.mount("#root")这样就满足了我们一开始的需求，但是有时候，我们也想像其他Vue命令引用一样，在命令后面加上指定的命令to，然后根据这个值对应对应的样式或者其他属性。比如我们定义一个v-pos属性，那么元素到topmargin的距离就是这个数。这时候我们可以写成constdirectives={focus:{mounted(el){el.focus()}}}constapp=Vue.createApp({data(){return{top:400}},template:`
修改高度 `})app.directive('pos',{mounted(el,binding){el.style.top=binding.value+'px'},updated(el,binding){el.style.top=binding.value+'px'}})constvm=app.mount("#root")解决了一个问题，但是我们并不满足，我们希望按照自定义指令的属性不同，调整元素的样式，也就是我们希望自定义指令后面跟着left，我们希望是距离左边的距离，同样，right后面跟着距离右边的距离，我们可以这样constdirectives={focus:{mounted(el){el.focus()}}}constapp=Vue.createApp({data(){return{distance:400}},template:`
