码迷,mamicode.com
首页 > Web开发 > 详细

通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式

时间:2018-07-03 14:58:09      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:var   控制   width   编写   fine   ref   handle   jquery   v-for   

Vue MVVM设计模式:

在使用vue进行编程时,不会再涉及到DOM的操作,取而代之的是修改数据层,当把数据进行变更的时候,vue之中它的底层会自动的根据数据的不同帮助我们去重新渲染页面。

编码时不需要关注VM层是如何实现的,它是vue内置的,只需要关注M层(模型层)和V层(视图层)。

使用MVVM设计模式进行编码时,编码的重点一部分在于视图层,一部分在于模型层。

data:指M层。

<div>模板标签:指V层。

vue:自身实现VM层。vue会监听到数据变了会帮你改变视图层,vue也能监听到视图层有一些事件触发然后帮助你通过VM这一层去调用一些你写的逻辑代码,通过这些代码改变了M层的数据,当数据发生变化时,VM层又会自动的把数据的变化映射到视图层的上面来。

VM层的实现:引入虚拟DOM+ES5的一个核心API:Object.defineProperty(),来实现VM层的架构体系。

MVVM设计模式的好处:

开发时只需要关注M层的开发。代码会得到显著的减少。

MVVM里最重的一层是M层。

vue是面向数据进行编程。

JQuerty:MVP设计模式: 

M(model):模型层(数据层)(弱)
V(view):视图层,页面上的DOM展示
P(presenter):控制器(最核心的一层),视图和模型层的中转站,大量代码做DOM的操作,模型层非常弱。视图发生改变点击提交时控制器会去执行,控制器里负责了所有的业务逻辑,控制器可以去调模型层去发Ajax请求,控制器通过DOM操作再改变视图层。
在大型项目中,JQuery编写的百分之七八十以上的代码都在操作DOM。
JQuery是面向DOM在做开发。

vue实现todolist:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>todolist</title>
 9     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 </head>
11 
12 <body>
13     <div id="app">
14         <!-- v-model:数据的双向绑定 -->
15         <!-- 把input里的value值和data里的value值做了绑定 -->
16         <input type="text" name="" id="" v-model="inputValue">
17         <!-- v-on:绑定事件 -->
18         <button v-on:click="handleBtnClick">提交</button>
19         <ul>
20             <!-- item指list中的每一项(循环过程的每一项内容) -->
21             <!-- v-for指令:循环数据 -->
22             <li v-for="item in list">{{item}}</li>
23         </ul>
24     </div>
25 
26     <script>
27         var app = new Vue({
28             el: #app,
29             data: {
30                 list: [],
31                 inputValue: ‘‘
32             },
33             methods: {
34                 handleBtnClick: function() {
35                     this.list.push(this.inputValue);
36                     this.inputValue = ‘‘;
37                 }
38             }
39         })
40     </script>
41 </body>
42 
43 </html>

jquery实现todolist:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>TodoList Jquery</title>
 9     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10 </head>
11 
12 <body>
13     <div>
14         <input type="text" id="input">
15         <button id="btn">提交</button>
16         <ul id="list"></ul>
17     </div>
18 
19     <script> 
20         function Page() {
21 
22         }
23         $.extend(Page.prototype, {
24             init: function() {
25                 this.bindEvents()
26             },
27             bindEvents: function() {
28                 var btn = $(#btn);
29                 btn.on(click, $.proxy(this.handleBtnClick, this)); //proxy:改变this的指向
30             },
31             handleBtnClick: function() {
32                 var inputEle = $(#input);
33                 var inputValue = inputEle.val(); //获取input框的内容
34                 var ulEle = $(#list);
35                 ulEle.append(<li> + inputValue + </li>);
36                 inputEle.val(‘‘);
37             }
38         })
39         var page = new Page();
40         page.init();
41     </script>
42 </body>
43 
44 </html>

 

通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式

标签:var   控制   width   编写   fine   ref   handle   jquery   v-for   

原文地址:https://www.cnblogs.com/knuzy/p/9257623.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!