前言
我刚开始学习Vue的时候有很多问题,最近在网上看到一些,只知道Vue是一个框架,却苦于不知道Vue到底是干嘛的同学们。希望这系列的文章能帮助大家对Vue有一个最基本的扫盲。
Vue是干什么用的?有什么优点?
简单的说,其实vue就是一个工具。就和jQuery一样,方便我们开发的工具罢了<b>(当然这里说的一样指的是作为"前端工具"这个特性)</b>。如果你现在正在使用jQuery开发网页,那么你完全可以使用Vue来完成相同的工作。那既然完成的工作相同,我们为什么要选择Vue呢?
1. 更少的DOM操作,更便捷的语法,更高的开发效率,废话不多说,我先举个栗子:
// 首先我们有一个用于输出名字的列表
<ul id="nameList"><ul>
// 假设现在有三个名字要以列表的形式输出
var names = ['xuxule', 'haimianbaobao', 'paidaxing'];
// 1.jQuery实现
var html = '';
names.forEach(name => {
html += '<li>' + name + '</li>';
});
$('#nameList').html(html); // 添加进DOM中
<ul id="nameList">
<li v-for="name in names">{{name}}<li>
<ul>
通过这个例子,我解释一下,前面说到的几个Vue的优点
><b>更少的DOM: </b>参考刚刚的例子,在用传统的jQuery的操作时,需要选择DOM,创建DOM,添加DOM。这样做并不算麻烦,但是相比较于Vue来说就不算便捷了。我可以看到在Vue的例子中,我们只需要在现有的DOM使用 v-for,{{}} 就输出了一个循环的列表,尤其是当DOM非常复杂的时候,使用jQuery构造DOM的方式会变得又乱又长,还不利于阅读。而Vue只需要v-for,{{}} 两个语句就能完成。
<b>便捷的语法:</b> 这个在没了解大量的Vue知识之前很难多说,但是可以参考刚刚使用到的v-for与{{}},非常便捷的就完成了DOM循环。这样的例子在Vue中还有很多。
<b>更高的开发效率:</b> 其实前两个有点只是为了铺垫更高的开发效率。我们<b>选择一门新技术或者工具时,更多的是为了工作效率上带来的提升</b>。理论上我们一天泡在工作上的时间是8小时(理论上...(ಥ _ ಥ)),你要为老板创造更大的产值才能给你更多的票票。所以如果使用Vue,那最重要的一点还是,快点干活,快点赚钱。。。
###### 2.更好的结构
Vue在书写时类似于下面的结构
var app = new Vue({
el: '#app',
data() {
return {
// 一些数据
}
},
methods: {
// 一些方法
}
})
这样我们很明显的就知道,data里面存放了一些数据,methods里面存放方法,快速找到代码位置,这对于我们团队协作,代码维护等方面都有很大帮助。
当然你也可以使用jQuery写出一样的形式,或者是你认为的更好的形式。但是问题是在于你并不能保证每个人都会这么写,尤其是阅读别人的代码时。
自由的语法并不是一个缺点,这是一把双刃剑。你可以用自由的语法创造奇迹,但也阻止不了某人(某人就是我(ಥ _ ಥ))写出<b>过于奔放的代码。</b>
### 关于比较对象 jQuery和Vue
我将jQuery和Vue做比较,是将它们都作为一个前端工具来比较的。而事实上jQuery是一个类库,写法上和基本和JS没有什么区别,只是提供了很多便捷的方法API。而Vue作为一个框架,虽然用的还是JS,但是书写结构上有了很大的不同。
其实更多关于Vue的比较是React和AngularJS,由于我这两个没学过,我不发表任何观点。关于这3者的比较,大家可以自行搜索查阅,网上还是挺多的。
### 后记
这是系列文章的第一部分,后面的系列还会总结一些学习Vue前的小问题。大家也可以在评论区里留言,之后的文章可能一起总结。
由于也是最近才开始写博客,写得可能比较简单和粗糙。还请大家多批评,多指正,这将是对我最大的帮助,谢谢大家。~(~ ̄▽ ̄)~