vue1.0源码解析六:实现常用的指令
Opened this issue · 0 comments
lihongxun945 commented
在上一篇结束的时候,我们已经完成了 tiny-vue
的基本架构,接下来,只要实现一些内置的指令,我们的代码就比较完善了。当然请别千万别在生产环境中使用哦,我们造轮子是为了学习,而不是为了真的用。
我们来实现一个 v-text
指令,其实非常简单,只要在 update
的时候把获取的值写到 innerHTML
中就行了。
export default {
bind () {
},
update (value) {
const el = this.descriptor.el
el.innerHTML = value
}
}
是不是很简单。
再实现一个 v-model
指令,这就是我们所说的双向绑定。那么既然是双向显然要分两步实现:
1, 当 DOM input
事件的时候,通过 watcher
把新的值写入 vm
2, 当vm update
时,把新的值写入 DOM
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-if
,v-bind
等指令都很容易实现,大家可以自行尝试一下。