Vue实现双向数据绑定代码
Vue实现双向数据,通过Object.defineProperty()中set()方法与get()。即发布订阅、订阅模式,(发布、订阅模式参考资料),对数据进行拦截。实现双向数据绑定(本人上一篇文章有讲过基本原理)。
代码
Object.defineProperty() 传入三个参数:
监听的对象
自定一个属性名(案例中定义为binding,当多个监听用于区分)
json对象,设置get、set方法(对应被调用、被修改)
验证
添加一个按钮。点击按钮给p标签赋值,观察input框内值的变换。
注意:
如果不使用上述方法,而采用直接获取DOM并赋值。虽然p标签会改变,但是input框中的内容不会跟随改变。大家可以验证一下(^__^) 嘻嘻……