Vue.directive('input', {
acceptStatement: true,
bind: function (el, binding, vnode) {
if (typeof binding.value !== 'function') {
throw new Error('v-input:' + binding.expression + ' is not a function')
}
el.addEventListener('input', vnode.context[binding.expression])
},
update: function (el, binding, vnode) {
if (typeof binding.value !== 'function') {
throw new Error('v-input:' + binding.expression + ' is not a function')
}
el.removeEventListener('input', vnode.context[binding.expression])
el.addEventListener('input', vnode.context[binding.expression])
},
unbind: function (el, binding, vnode) {
el.removeEventListener('input', vnode.context[binding.expression])
}
})

在Vue中，我們經常需要監(jiān)聽用戶輸入的數據，就需要用到v-model指令，其本質就是使用input事件來監(jiān)聽數據的變化。但是有時候我們也需要自定義一個input事件來監(jiān)聽用戶的輸入，這就需要用到自定義指令v-input了。

使用v-input指令的方法和v-model很相似，只需要在標簽上綁定一個方法即可：

<input v-input="handleInput"></input>

handleInput方法就是我們需要定義的函數，它會在用戶輸入數據的時候自動調用。

接下來，我們看一下v-input指令的源碼：

首先定義了一個名字叫做“input”的指令，然后在bind、update、unbind三個階段分別去綁定、更新、解綁input事件。其中，我們需要注意的是acceptStatement:true，這個意思就是告訴Vue這個指令的值可以接受語句（即方法）。