【尤雨溪】如何学习Vue.js网站前端开发？

        尤雨溪是vue.js框架的作者，HTML5版Clear的打造人。他认为，未来App的趋势是轻量化和细化，能解决问题的应用就是好应用。而在移动互联网时代大的背景下，个人开发者的机遇在门槛低，成本低，跨设备和多平台四个方面。
 

   

正确的方向胜过无谓的努力

 

有两只蚂蚁想翻越一段墙，寻找墙那头的食物。一只蚂蚁来到墙脚就毫不犹豫地向上爬去，可是每当它爬到大半时，就会由于劳累、疲倦而跌落下来。虽然它不气馁，一次次跌下来，又迅速地调整一下自己，重新开始向上爬去。

 

另一只蚂蚁观察了一下，决定绕过墙去。很快，这只蚂蚁绕过墙来到食物前，开始享受起来；而另一只蚂蚁还在不停地跌落下去又重新开始。

 

很多时候，成功除了勇气、坚持不懈外，更需要方向。也许有了一个好的方向，成功来得比想象的更快。如果在错误的路上奔跑,再怎么努力也是白搭。学习Web前端也是如此，首先应该选择一个正确的学习路线。

 

Web前端的学习路线 结合我的学习经历、近年来辅导学生的经验以及公司中实际项目的需求，在这里将Web前端的学习分为以下几个阶段，具体的学习路线图如图所示。

第一阶段——HTML的学习。

 

超文本标记语言（HyperText Mark-up Language 简称HTML）是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，我们必须掌握HTML的基本结构和常用标记及属性。

 

HTML的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质，将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说必定是极好的！

 

在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。

 

于是进入第二个阶段——CSS的学习。

 

CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。

 

同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习，我们就可以顺利完成“一幢楼房”的建设。

 

“楼房”建设完成之后，我们可以交给用户使用，但是如果想让用户获得更佳的体验，我们还可以对“楼房”进行更深一步的“装修”，让它看起来更“豪华”一些。

 

为了完成这个任务，我们进入第三个阶段——JavaScript的学习。

 

JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么呆板，屌丝瞬间逆袭高富帅！有么有？

 

此时，也许你还沉浸在JavaScript给你带来的惊喜之中，但你的项目经理却突然对你大吼道

 

 “这个效果在××浏览器下不兼容，重新搞……”

 “不兼容？”瞬间石化了有木有？

 “我擦，坑爹啊！那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!” 

 

JavaScript的兼容性和复杂性有时候的确让我们头疼，还好有“大神”帮我们做了封装。

 

接下来我们进入第四个阶段——jQUery的学习。

vuejs已经很多公司在使用了，貌似很火。但是我还没用，所以该赶紧去学习去充电了。其实也知道，只是项目没涉及到，所以没太在意，毕竟前端学习的东西太多了。

 

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

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

 

现在vuejs已经有2.0版本了。

 

        最近遇到很多朋友说想看vuejs2.0的相关视频。个人感觉先学习下vuejs1.0,然后在结合2.0的文档，对有些东西进行区分就可以了。因为2.0的相关东西都是根据官方给的文档来的。

来都来了，顺便记录下github上面的star

 

vuejs在官网的简介是：

易用

已经会了HTML,CSS,JavaScript？即刻阅读指南开始构建应用！

灵活

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

性能

17kb min+gzip 运行大小
超快虚拟 DOM 
最省心的优化

 

 

官网的小demo

Vue.js 是一个用于创建 Web UI 的 JavaScript 库。结合其他的一些工具，它也可以成为一个“框架”。通过我们的上一篇博客，想必你已经知道 Vue.js 是顶级框架之一，并且在很多场景下已经替换了 Angular 和 React。这就引出了本文要讨论的话题：‘Vue.js 很好，但是比 Angular 或 React 更好吗？’。

如果你之前从来没有听说过或使用过 Vue.js，那么你可能会想：我去，又一个 JavaScript 框架！行，朕知道了。但是，Vue.js 已经不是一个“新” 框架了。Vue.js 在 2013 年首次发布，现在在 GitHub 上已经有 59600 颗星了，而且也有大量的下载。我们来看看下面这几张图：

更多文章新闻：