最近VueJs确实火了一把,自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。

既然大家会看这篇文章,那么肯定是vue的学习者了,或是遇到的瓶颈,或者刚刚开始学,不知道如何快速起步,本篇文章将带领大家在最短的时间内构件一个学习Vue的学习路线

Vuejs的作者尤雨溪尤大也写过一篇关于新手学习vue路径的文章新手向:Vue 2.0 的建议学习顺序

百度vuejs搜索的是vue1的文档,推荐大家直接上2.0,毕竟1和2还是有区别的。vue2.0文档地址Vue2.0

Vue基础

  1. 对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目。
  2. 先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。
  3. vue的生命周期很重要,了解这点以后可以免去很多问题。
  4. 学完这些可以做一些练手的小项目,比如万年不变的todolist。。。
  5. 现在可以开始学习使用vue-cli构件项目了,学习组件化之前,推荐先看一下es6关于模块的介绍。阮一峰《ECMAScript6》 Module
  6. 光会这些还是不够的,还得会一些npm基础,知道如何用git-bush来安装模块依赖,会一些常用的命令。这方面的知识可以参阅npm入门文档
  7. 看完这些就可以试着将之前的写的demo用搭建的vue-cli来实现。附上我写的一个入门小demovue-demo-search
  8. 多看看组件那里,看看如何在vue-cli中怎么实现组件化。
  9. 到这里vue基础篇就结束了。你还可以有条件的参阅剩下的官方文档里面的进阶篇,如果时间有限,就直接进入vue-router
 
 

Vue-router

  1. 和之前一样,推荐直接用html+js过一遍文档
  2. 对路由导航钩子得好好看一看。
  3. 看完文档就可以上手vue-cli,一般新手在这几天都会死活跑不出来。
  4. 最直接的方法就是去github上搜一些关于vue-router2.0的demo,看如何构件路由,如何构件项目目录。
  5. 我这里有一个传送门
  6. 如果能跑出来,就可以做一些小项目了,比如写一个知乎日报啊,这些demo在github上很多。
  7. 可以结合一些组件库写demo,这样可以更加了解组件化。比如饿了么团队的Elementmint-ui
 
 

Vuex

什么是vuex?
Vuex 是一个专门为 Vue.js 应用设计的 状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务,其中的规则确保状态只能按预期方式变更。说白了就是控制应用的一些全局状态。状态改变了,对应的视图也会改变。
 
  1. 在学习Vuex时,会有一些ES6特性,当遇到这些时,最好不要一带而过,去好好看一看这些es6特性。
  2. 比如在学习Action时可以看看ES6新增的Promise和参数解构。
  3. 实践的方法一样是先看别人别人写的代码,比如官方的购物车实例的应用结构
  4. 把之前写的demo优化一下,有些地方可以用用vuex
  5. vuex主要是用来对不同组件间进行通信,它构建了一个Vue实例的全局数据与方法,这些数据与方法可以在该Vue实例的所有组件中get与set
   
 
到此,恭喜你已经成功入门Vue了。还学会了一点ES6,,附带一点Webpack,可以开始写一些小作品了,比如写个播放器啊,写个高级点的todoList等等,附上我写的一个仿照酷狗webapp的例子吧,传送门

VueJs2.0建议学习路线的更多相关文章

  1. javase建议学习路线

    javase建议学习路线:1.环境的搭建2.基本变量类型3.流程控制4.数组5.集合6.IO7.异常8.线程9.网络编程

  2. Vue2.5学习路线及基础知识总结。

    在接触新技术不了解时,我喜欢去慕课网上看新手教程,在学习vue时,在慕课网上看了几个老师的视频,发现这挺好,讲到挺详细的,适合新手,有兴趣的可以先看一下,vue2.5入门教程. 然后在学习路上看见了一 ...

  3. MFC的学习路线

    首先,MFC是比较难的!比C#和VB要难得多.MFC是基于C++的.首先C++必须熟悉.MFC主要是学习里面的控件的使用. 建议学习路线: 1. 易语言中文编程从入门到精通: https://deta ...

  4. 新手入门指导:Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

  5. 一位资深程序员大牛给予Java初学者的学习路线建议

    java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈 ...

  6. spark1.1.0学习路线

          经过一段时间授课,积累下不少的spark知识.想逐步汇总成资料,分享给小伙伴们.对于想视频学习的小伙伴,能够訪问炼数成金站点的<spark大数据平台>课程.每周的课程是原理加实 ...

  7. 一位资深程序员给予Java初学者的学习路线建议

    一位资深程序员给予Java初学者的学习路线建议 java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干 ...

  8. 转载:一位资深程序员大牛给予Java初学者的学习路线建议

    一位资深程序员大牛给予Java初学者的学习路线建议   java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打 ...

  9. Vue 2.0 学习路线

    「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就 ...

随机推荐

  1. Transistor 晶体管 场效应 双极型 达林顿 CMOS PMOS BJT FET

    Transistor Tutorial Summary Transistor Tutorial Summary Bipolar Junction Transistor Tutorial We can ...

  2. Android UI系列-----时间、日期、Toasts和进度条Dialog

    您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内 ...

  3. fidder 抓 https包配置方法(ios & android & pc浏览器)

    1. fidder抓https包的基本配置,可参见以下博文 http://blog.csdn.net/idlear/article/details/50999490 2. 遇到问题:抓包看只有Tunn ...

  4. Android--Sensor传感器

    前言 Android提供了对设备传感器的支持,只要Android设备的硬件提供了这些传感器,Android应用可以通过传感器来获取设备的外界条件,包括手机的运行状态.当前摆放的方向等.Android系 ...

  5. mysql设置连接超时时间参数:wait_timeout

    [root@ ~]# mysql -h 192.168.0.* -uroot -pEnter password: Welcome to the MySQL monitor. Commands end ...

  6. 【Python】winpython下的包安装

    1.安装easy_install http://blog.csdn.net/A8572785/article/details/10945237 2.与ipython兼容的ipdb命令 pip inst ...

  7. 2.C#中泛型在方法Method上的实现

    阅读目录   一:C#中泛型在方法Method上的实现 把Persion类型序列化为XML格式的字符串,把Book类型序列化为XML格式的字符串,但是只写一份代码,而不是public static s ...

  8. 如何闪开安装VS2013必须要有安装IE10的限制

    把下面这一段文字,储存成.bat档案,然后右击以管理员角色去执行它.@ECHO OFF :IE10HACK REG ADD "HKLM\SOFTWARE\Wow6432Node\Micros ...

  9. CSS3绘制旋转的太极图案(一)

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  10. Eplan 2D安装版布局,部件、端子竖放

    部件竖放,不是通过变量的选择实现,而是通过设置实现的,具体设置在: 选项-设置-用户-2D安装板布局: 部件方向-更改为 垂直 部件放置-旋转角度-更改为90° 这样在连续放置部件的时候就变为竖放了, ...