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 总结
本文分别用 JQuery 和 Vue.js 实现了一个简单的功能,说明了 JQuery 与 Vue.js 在实现功能过程中的区别,并简单地描述了 MVVM
模式。