vue学习（二）之MVVM

MVVM

什么是MMVM

• MVVM表示的是View-ViewModel-Model，就是视图层-视图模型层-模型层。
• View是视图层，可以理解为HTML页面，Model是作为模型层，他是负责处理业务逻辑以及和服务器端进行交互的；ViewModel是作为视图模型层，也就是Vue框架的作用，主要是为了作为View和Model层之间的通信桥梁。

Vue与MVVM

• Vue是典型的MVVM模型的框架，主张减少对DOM元素的操作，解放程序猿的双手，提高效率。

if(showBtn){
    var btn = $('<button>点我点我点我</button>');
  btn.on('click', function(){
      console.log('你终于点中了我...');
  });
  $('#app').append(btn);
}

Vue中将视图层与模型层有效分离开，程序猿只关注于数据即可。

<div id="app">
    <button v-if="showBtn" v-on:click="handleClick">点我点我点我</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            showBtn: true
        },
        methods: {
            handleClick: function(){
                console.log('你终于点中了我...');
            }
        }
    });
</script>

• MVVM的思想，让我们开发更加方便，提供了数据的双向绑定，*数据的双向绑定是由VM提供的（v-model）

MVC和MVVM的关系

• MVC是后端的分层开发概念
• MVVM是前端视图层的概念，主要关注与视图层分离
  下图展示俩者主要区别：