您的位置：首页 > 产品设计 > UI/UE

【Vue】-(3) Vue与MVVM

2016-04-25 17:16 351 查看
之前不知道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);
})



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                mvvm
                                                VUE
                                                学习记录
                                                java前端
                                                Vue框架
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航