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 变量控制。

add 和 remove 方法中，并没有直接操作 DOM，而是通过改变与 p 元素 绑定的变量 showP 间接地控制了 p 元素 是否插入。

2.3 MVVM 模式

Vue.js 使用了 MVVM (Model-View-ViewModel) 设计模式，这种设计模式的特点是，当 View 层发生变化时，会自动更新到 ViewModel 中；而当ViewModel 中的 数据 发生变化时，View 也会自动发生变化。

如上面例子，new Vue(....) 生成了 ViewModel，该 ViewModel 与 id 为 app 的 div 进行了绑定，当 ViewModel 中的数据中的 showP 发生变化时，会自动更新 p 元素是否插入。

3 总结