【Vue】-(3) Vue与MVVM

来源：互联网发布：奔驰g63网络图片编辑：程序博客网时间：2024/05/18 18:41

之前不知道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实例都会代理datavm.text===model.text;//===true//如果修改vm.text='change'//那么相应的vm.text//--->'change' //Vue实例还有一些方法和实例属性vm.$data===model//->truevm.$el===document.getElementById('app');//truevm.$watch('text',function(newVal,oldVal){//这个回调函数将在text改变的时候调用alert("newVal="+newVal);alert("oldVal="+oldVal);})

1 0