Vue.js新手入门指南 - 自学编程网

　　最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在做自己的结业项目。

　　在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之前以PHP+模版引擎为主的开发，从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目，我总结了一些知识和经验想与大家分享。

　　下面我就以问答的形式来分享吧。这里假设你仅仅只掌握了HTML+CSS+JavaScript，如果你对JQuery这个前端库，以及各种后端模版语言比如说PHP，JSP还有所了解并且使用过的话那就太好了。

　1.Vue.js是什么？

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。

　　这是官网的介绍，是不是觉得非常的抽象非常的官方？看完之后可能还是有很多人不是很懂这个框架到底是用来做什么的，什么是“渐进式框架”？什么是“自底向上增量开发”？什么是“视图层”？什么是“单文件组件”？什么是“复杂的单页应用？”第二段话里面“响应的数据绑定和组合的视图组件”这又是个啥？还有最后一段话，“Vue.js 与其它库/框架的区别”究竟是什么？

　　不要担心，如果你慢慢看完这里面的所有问答，一定会对前面那些可能你从未听说过的专业术语有一种恍然大悟的感觉。

　2.Vue.js到底是什么？

　　想必现在能看到我这篇文章的人，都是用着APP或者网页版知乎在阅读把。Vue.js就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。

　3.单页应用程序（SPA）

　　顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多，而且页面中的内容需要根据用户的操作动态变化。

　4.你前面说的网页版知乎我也可以用JQuery写啊，为什么要用Vue.js呢？

　　讲到JQuery，就不得不说到JavaScript的DOM操作了。如果你用JQuery来开发一个知乎，那么你就需要用JQuery中的各种DOM操作方法去操作HTML的DOM结构了。

　　现在我们把一个网页应用抽象一下，那么HTML中的DOM其实就是视图，一个网页就是通过DOM的组合与嵌套，形成了最基本的视图结构，再通过CSS的修饰，在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分，就需要用到JavaScript来接受用户的交互请求，并且通过事件机制来响应用户的交互操作，并且在事件的处理函数中进行各种数据的修改，比如说修改某个DOM中的innerHTML或者innerText部分。

　　我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次，这个层次就叫做视图层。

Vue 的核心库只关注视图层

　　我们为什么要把视图层抽取出来并且单独去关注它呢？

　　因为在像知乎这种页面元素非常多，结构很庞大的网页中，数据和视图如果全部混杂在一起，像传统开发一样全部混合在HTML中，那么要对它们进行处理会十分的费劲，并且如果其中有几个结构之间存在藕断丝连的关系，那么会导致代码上出现更大的问题，这什么问题呢？

　　你是否还记得你当初写JQuery的时候，有写过$('#xxx').parent().parent().parent()这种代码呢？当你第一次写的时候，你觉得页面元素不多，不就是找这个元素的爸爸的爸爸的爸爸吗，我大不了在注释里面写清楚这个元素的爸爸的爸爸的爸爸不就好了。但是万一过几天之后你的项目组长或者你的产品经理突然对你做的网页提出修改要求，这个修改要求将会影响页面的结构，也就是DOM的关联与嵌套层次要发生改变，那么$('#xxx').parent().parent().parent()可能就会变成$('#xxx').parent().parent().parent().parent().parent()了。

　　这还不算什么，等以后产品迭代越来越快，修改越来越多，而且页面中类似的关联和嵌套DOM元素不止一个，那么修改起来将非常费劲。而且JQuery选择器查找页面元素以及DOM操作本身也是有性能损失的，可能到时候打开这个页面，会变得越来越卡，而你却无从下手。

　　当你在编写项目的时候遇到了这种问题，你一定会抱怨，为什么世上会有HTML这种像盗梦空间一样的需要无数div嵌套才能做出页面的语言，为什么当初学JQuery看中的是它简洁的DOM操作，现在却一点也不觉得它有多简洁，难道我学的是假的JQuery？为什么写个代码这么难，你想砸电脑，你想一键盘拍在产品狗的脑袋上，责怪他天天改需求才让你原本花清香茶清味的代码变得如此又臭又长。

　　这个时候如果你学过Vue.js，那么这些抱怨将不复存在。

　5.Vue.js为什么能让基于网页的前端应用程序开发起来这么方便？

　　因为Vue.js有声明式，响应式的数据绑定，与组件化的开发，并且还使用了Virtual DOM这个看名字就觉得高大上的技术。

　　可是这些名词都是啥？

　6.响应式的数据绑定

　　这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出响应。至于是如何响应的，大家可以先把下面这段代码随便粘贴到一个扩展名为html的文件然后用浏览器打开，随便在文本框里面输入一些文字，观察一下页面变化。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js测试 - 代码之美专栏</title>
	<!-- author:昌维 代码之美 https://zhuanlan.zhihu.com/codes -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message">
		<hr>
		<p>{{ message }}</p>
	</div>
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello Vue!'
		  }
		})
	</script>
</body>
</html>

编程技巧