共计 1722 个字符,预计需要花费 5 分钟才能阅读完成。
有了后面组件、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")
大家还能够扫描二维码,关注我的微信公众号,蜗牛全栈
正文完
发表至: javascript
2021-11-02