前言
我刚开始学习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前的小问题。大家也可以在评论区里留言，之后的文章可能一起总结。
由于也是最近才开始写博客，写得可能比较简单和粗糙。还请大家多批评，多指正，这将是对我最大的帮助，谢谢大家。~(～￣▽￣)～
网友评论