乐趣区

关于javascript:Vue3中的自定义指令

jiezi

有了后面组件、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")

大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈

退出移动版