vue1.0源码解析六：实现常用的指令

[lihongxun945]

在上一篇结束的时候，我们已经完成了 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 等指令都很容易实现，大家可以自行尝试一下。