之前不知道MVVM是什么东西,后来了解了一下,MVVM实际上是mvc->mvp->mvvm的一个过渡,这样就好理解了,Model View ViewModel。其中view就是Dom视图,Model是数据,ViewModel是视图数据控制,相当于mvc中controller的角色.下面是官网的一个小案例,很简单明了
view:
<div id="app">
<span style="white-space:pre"> </span>Hello {{text}}
<span style="white-space:pre"> </span><input v-model="text" />
</div>
js:
</pre><pre name="code" class="javascript">var model={
text:"Vue.js"
};
var vm=new Vue({
el:'#app',
data:model
});
//每个Vue实例都会代理data
vm.text===model.text;//===true
//如果修改
vm.text='change'
//那么相应的
vm.text//--->'change'
//Vue实例还有一些方法和实例属性
vm.$data===model//->true
vm.$el===document.getElementById('app');//true
vm.$watch('text',function(newVal,oldVal){
//这个回调函数将在text改变的时候调用
alert("newVal="+newVal);
alert("oldVal="+oldVal);
})