完成的效果
<div id="mvvm-app">
<input type="text" v-model="word">
<p>{{word}}</p>
<button v-on:click="sayHi">change model</button>
</div>
<script src="observer.js"></script>
<script src="watcher.js"></script>
<script src="compile.js"></script>
<script src="mvvm.js"></script>
<script>
var vm = new MVVM({
el: '#mvvm-app',
data: {
word: 'Hello World!'
},
methods: {
sayHi: function() {
this.word = 'Hi, everybody!';
}
}
});
</script>
@前端进阶之旅: 代码已经复制到剪贴板

# 一、几种实现双向绑定的做法
目前几种主流的
mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare等)添加了change(input)事件,来动态修改model和view,并没有多高深。所以无需太过介怀是实现的单向或双向绑定。
- 发布者-订阅者模式(
backbone.js) - 脏值检查(
angular.js) - 数据劫持(
vue.js)
# 1.1 发布者-订阅者模式
- 一般通过
sub,pub的方式实现数据和视图的绑定监听,更新数据方式通常做法是vm.set('property', value),这里有篇文章讲的比较详细 - 这种方式现在毕竟太low了,我们更希望通过
vm.property = value这种方式更新数据,同时自动更新视图,于是