1. 犀牛前端部落首页
  2. Vue.js去哪儿

Vue2.5开发去哪儿网-Vue.js基础MVVM模式

讲解MVVM模式之前,我们先了解一下MVP设计模式。

Vue2.5开发去哪儿网-Vue.js基础MVVM模式

  • Model 数据层
  • Presenter 呈现层,大家可以将其理解为业务逻辑相关的控制层
  • View 视图层 一般指的页面上DOM的显示

上篇文章中,我们实现了一个Vue.js的TodoList,如果使用jQuery我们应该如何实现呢?

jQuery实现方式如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TodoList</title>
    <script src="./jquery.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" id="input">
        <button id="btn">提交</button>
        <ul id="list">
        </ul>
    </div>
    <script>
        let Page = {
            init: function(){
                this.bindEvents();
            },
            bindEvents: function(){
                let $btn = $('#btn'),
                    $input = $('#input'),
                    $list = $('#list');
                $btn.on('click',function(){
                    if($input.val()){
                        let $li = $(document.createElement('li'));
                        $li.text($input.val());
                        $list.append($li);
                        $input.val('');
                    }
                });
                $($list,'li').on('click',function(){
                    $(this).remove();
                })
            },
        }
        Page.init();
    </script>
</body>
</html>

可以看到同样的实现效果,Vue.js实现的代码比jQuery实现的代码少了很多,在Vue.js中

Vue2.5开发去哪儿网-Vue.js基础MVVM模式

我们将数据看成M层,将模板标签看成V层,我们写的代码大多数是对数据进行操作,而数据进行变化页面的V层自动进行变,这样的实现是VM帮我们实现的,VM不是我们自己实现的,Vue就是VM层,它会帮我们监听数据的改变,Vue也能帮我们监听事件的触发。

当我们使用Vue这种MVVM这种框架进行开发的时候,我们只需要去关注M层的开发就可以了,我们将数据进行修改,页面会自动跟着变,同时页面上的变化,你的Vue实例也能感知到,可以方便的帮你去操作数据,所以当我们使用MVVM框的时候,重心是在M层的开发上。

因此你可以这样理解,以前我们使用jQuery进行开发的时候,我们是面向DOM进行开发。

现在使用MVVM进行开发的时候,我们是面向数据进行编程,在大量的实战中,如果我们使用MVP进行开发,我们的代码中会有很多关于DOM的操作,而使用MVVM进行开发的时候,DOM的操作被极大的简化了,也就是在大型项目开发中使用Vue这种框架进行开发,你的代码量会得到显著的减少,一般来说至少减少30%的代码量。

 

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2718.html

发表评论

登录后才能评论