【Vue】学习vue前的几个常见问题（part1）

前言

我刚开始学习Vue的时候有很多问题，最近在网上看到一些，只知道Vue是一个框架，却苦于不知道Vue到底是干嘛的同学们。希望这系列的文章能帮助大家对Vue有一个最基本的扫盲。

Vue是干什么用的？有什么优点？

简单的说，其实vue就是一个工具。就和jQuery一样，方便我们开发的工具罢了（当然这里说的一样指的是作为"前端工具"这个特性）。如果你现在正在使用jQuery开发网页，那么你完全可以使用Vue来完成相同的工作。那既然完成的工作相同，我们为什么要选择Vue呢？

1. 更少的DOM操作，更便捷的语法，更高的开发效率，废话不多说，我先举个栗子：

// 首先我们有一个用于输出名字的列表

// 假设现在有三个名字要以列表的形式输出
var names = ['xuxule', 'haimianbaobao', 'paidaxing'];

// 1.jQuery实现
var html = '';
names.forEach(name => {
html += '

• ' + name + '
';
});
$('#nameList').html(html); // 添加进DOM中






• {{name}}
• 
  

  
  通过这个例子，我解释一下，前面说到的几个Vue的优点
  >更少的DOM: 参考刚刚的例子，在用传统的jQuery的操作时，需要选择DOM，创建DOM，添加DOM。这样做并不算麻烦，但是相比较于Vue来说就不算便捷了。我可以看到在Vue的例子中，我们只需要在现有的DOM使用 v-for，{{}} 就输出了一个循环的列表，尤其是当DOM非常复杂的时候，使用jQuery构造DOM的方式会变得又乱又长，还不利于阅读。而Vue只需要v-for，{{}} 两个语句就能完成。
  便捷的语法: 这个在没了解大量的Vue知识之前很难多说，但是可以参考刚刚使用到的v-for与{{}}，非常便捷的就完成了DOM循环。这样的例子在Vue中还有很多。
  更高的开发效率: 其实前两个有点只是为了铺垫更高的开发效率。我们选择一门新技术或者工具时，更多的是为了工作效率上带来的提升。理论上我们一天泡在工作上的时间是8小时（理论上...(ಥ _ ಥ)），你要为老板创造更大的产值才能给你更多的票票。所以如果使用Vue，那最重要的一点还是，快点干活，快点赚钱。。。
  
  ###### 2.更好的结构
  Vue在书写时类似于下面的结构
  

  var app = new Vue({
  el: '#app',
  data() {
  return {
  // 一些数据
  }
  },
  methods: {
  // 一些方法
  }
  })

  这样我们很明显的就知道，data里面存放了一些数据，methods里面存放方法，快速找到代码位置，这对于我们团队协作，代码维护等方面都有很大帮助。
  当然你也可以使用jQuery写出一样的形式，或者是你认为的更好的形式。但是问题是在于你并不能保证每个人都会这么写，尤其是阅读别人的代码时。
  自由的语法并不是一个缺点，这是一把双刃剑。你可以用自由的语法创造奇迹，但也阻止不了某人（某人就是我(ಥ _ ಥ)）写出过于奔放的代码。
  
  ### 关于比较对象 jQuery和Vue
  我将jQuery和Vue做比较，是将它们都作为一个前端工具来比较的。而事实上jQuery是一个类库，写法上和基本和JS没有什么区别，只是提供了很多便捷的方法API。而Vue作为一个框架，虽然用的还是JS，但是书写结构上有了很大的不同。
  其实更多关于Vue的比较是React和AngularJS，由于我这两个没学过，我不发表任何观点。关于这3者的比较，大家可以自行搜索查阅，网上还是挺多的。
  
  
  ### 后记
  这是系列文章的第一部分，后面的系列还会总结一些学习Vue前的小问题。大家也可以在评论区里留言，之后的文章可能一起总结。
  由于也是最近才开始写博客，写得可能比较简单和粗糙。还请大家多批评，多指正，这将是对我最大的帮助，谢谢大家。~(～￣▽￣)～