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

我们来实现一个 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 等指令都很容易实现，大家可以自行尝试一下。