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>
原文地址：https://www.cnblogs.com/knuzy/p/9257623.html
时间： 2024-10-06 09:16:24