八小时实现迷你版vuejs六 实现常用指令

我们来实现一个 v-text 指令,其实非常简单,只要在 update 的时候把获取的值写到 innerHTML 中就行了。

1
2
3
4
5
6
7
8
export default {
bind () {
},
update (value) {
const el = this.descriptor.el
el.innerHTML = value
}
}

是不是很简单。

再实现一个 v-model 指令,这就是我们所说的双向绑定。那么既然是双向显然要分两步实现:

1, 当 DOM input 事件的时候,通过 watcher 把新的值写入 vm
2, 当vm update 时,把新的值写入 DOM

1
2
3
4
5
6
7
8
9
10
11
12
export default {
bind () {
const el = this.descriptor.el
el.addEventListener('input', () => {
this._watcher.set(el.value)
})
},
update (value) {
const el = this.descriptor.el
el.value = value
}
}

是不是也很简单。

还有常见的 v-ifv-bind 等指令都很容易实现,大家可以自行尝试一下。