1 vue.js - MVVM模式

原创已于 2022-03-13 13:47:31 修改 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-03-13 13:43:21 首次发布

前端同时被 2 个专栏收录

1 篇文章

订阅专栏

Vue.js

1 篇文章

订阅专栏

本文对比了Vue.js和jQuery在实现功能时的区别，指出Vue.js通过MVVM模式实现了数据与视图的分离，提高了代码可维护性和可读性。在jQuery中，业务逻辑和DOM操作混合，而Vue.js则通过数据绑定和指令简化了DOM操作。Vue.js的实现更加清晰地展示了数据与视图的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 什么是 Vue.js

Vue.js 是一套用于构建用户界面的渐进式框架。它有以下2个特征：

简单小巧：vue.js压缩后的文件非常小，例如经压缩后的 vue.js2 仅仅90KB。
渐进式：Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2 Vue.js 与传统的 Javascript 开发有什么不同

下面，我们分别使用 JQuery 及 vue.js 实现这样一个效果：

点击 add 按钮，向 id 为 app 的 div 插入一个 div，并把 add 按钮设置为 disabled，remove 按钮设置为 enable。
点击remove按钮，移除 id 为 app 的 div 里的 div，并把 add 按钮设置为enable, remove 设置为disabled.

2.1 JQuery 的实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JQuery实现</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
	<script type="text/javascript">
	    function addDiv(operator) {
		    if (operator === 'add') {
				$('#app').append(
					$('<p style="padding: 8px; margin-top: 12px; font-size: 1.2em; border: solid 1px #f2f2f2">Hello, I am a p element.</p>')
				);
				$('#app button:nth-child(1)').attr('disabled', 'disabled');
				$('#app button:nth-child(2)').removeAttr('disabled');
			} else {
				$('#app p').remove();
				$('#app button:nth-child(1)').removeAttr('disabled');
				$('#app button:nth-child(2)').attr('disabled', 'disabled');
			}
		}
	</script>
</head>
<body>
  <div id="app" style="background-color: #fefefe; font-size: 14px">
      <button onclick="addDiv('add')">Add p</button>
	  <button onclick="addDiv('remove')" disabled>Remove p</button>
  </div>
</body>
</html>

用 JQuery 实现功能并不复杂，直接利用 JQuery 强大的选择器即可以方便地插入，删除，修改 页面上的 DOM 元素。但，这样写有以下两个缺点：

1: 业务逻辑代码 跟操作DOM的 视图代码 混在一起，当功能越来越复杂的时候，代码将会越来越难维护及难读。
2: html 代码无法直观地体现 id 为 app 的 p 里面会有一个内容为 Hello, I am a p element. 的 p 元素，我们不得不先看 add button 的 onclick 调用了什么函数，然后再看该函数进行了什么操作。

2.2 Vue.js 的实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Vue.js 实现</title>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app" style="background-color: #fefefe; font-size: 14px">
      <button v-on:click="add" :disabled="showP">Add p</button>
	  <button v-on:click="remove" :disabled="!showP">Remove p</button>
	  <div  v-if="showP"
		style="padding: 8px; margin-top: 12px; font-size: 1.2em; border: solid 1px #f2f2f2">Hello, I am p element.</div>
  </div>
</body>
	<script type="text/javascript">
	    new Vue({
			el: '#app',
			data: {
				showP: false
			},
			methods: {
				add: function() {
					this.showP = true;
				},
				remove: function() {
					this.showP = false;
				}
			}
		});
	</script>
</html>

从上面的代码可以看到，使用 Vue.js 把 视图 与 数据 进行了分离。视图 中通过 Vue 指令清晰地表示了 DOM元素 的 表现行为 与 数据 的关系，如 p 元素 上的指令的 v-if="showP" 表明了：该 p 元素 是否插入，是通过 数据model 中的 showP 变量控制。