自定義指令的鉤子函數(shù)
Vue 提供了自定義指令的5個(gè)鉤子函數(shù)：
- bind：指令第一次綁定到元素時(shí)調(diào)用妹萨，只執(zhí)行一次年枕。在這里可以進(jìn)行一次性的初始化設(shè)置。
- inserted：被綁定的元素乎完，插入到父節(jié)點(diǎn)DOM時(shí)被調(diào)用熏兄。
- update：綁定元素更新時(shí)調(diào)用。
- componentUpdated：綁定元素與子元素更新時(shí)調(diào)用树姨。
- unbing：只調(diào)用一次摩桶，指令與元素解綁時(shí)調(diào)用。
鉤子函數(shù)的參數(shù) (即 el帽揪、binding硝清、vnode 和 oldVnode)。
- el：指令所綁定的元素转晰，可以用來直接操作 DOM芦拿。
- binding：一個(gè)對(duì)象挟鸠，包含以下 property：
name：指令名勒葱，不包括 v- 前綴。
value：指令的綁定值淮逊，例如：v-my-directive="1 + 1" 中侠坎，綁定值為 2蚁趁。
oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用实胸。無論值是否改變都可用他嫡。
expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中庐完，表達(dá)式為 "1 + 1"钢属。
arg：傳給指令的參數(shù)，可選门躯。例如 v-my-directive:foo 中淆党，參數(shù)為 "foo"。
modifiers：一個(gè)包含修飾符的對(duì)象讶凉。例如：v-my-directive.foo.bar 中染乌，修飾符對(duì)象為 { foo: true, bar: true }。
項(xiàng)目中 el + binding.value 就夠用了,比如網(wǎng)上搜的一個(gè)例子,函數(shù)節(jié)流指令：
<template>
<div>
<el-input
type="text"
v-model="text"
v-debounce="search" showClear
>
</el-input>
</div>
</template>
<script>
export default {
name: 'debounce',
data () {
return {
text: '',
count: 1
}
},
directives: {
debounce: {
inserted: function (el, binding) {
let input = el.querySelector('input')
let timer
input.addEventListener('keyup', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value()
}, 300)
})
}
}
},
methods: {
search () {
// 實(shí)際要進(jìn)行的操作 axios.get('')之類的
this.count++
console.log('count is:' + this.count)
}
}
}
</script>
本來那個(gè)input 是原生元素懂讯，想試試組件el-input支持不 結(jié)果還真支持荷憋，所以看了下組件源碼，結(jié)果這里的el只是input的父元素div!!!el-input沒有做任何操作褐望，而且支監(jiān)聽div的keyup起到節(jié)流效果勒庄，沒有任何問題串前？？实蔽？ 一臉黑人問號(hào)荡碾。。局装。求大神解釋
為了安全起見 還是綁定給input了玩荠。
