【Vue】-(3) Vue与MVVM

之前不知道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);
})