Vue学习路线
前言:学习Vue已经两个月了,目前前端的框架用得比较多的就是Bootstrap和Vue,而Bootstrap是开发人员用得较多,因为较为简单,上手也快。Vue是目前很火的数据驱动框,17年的时候就开始火了。
之前我用Bootstrap框架,转学习Vue的时候还是花了一点学习成本的。
既然大家会看这篇文章,那么肯定是vue的学习者了,或是遇到的瓶颈,或者刚刚开始学,不知道如何快速起步,本篇文章将带领大家在最短的时间内构件一个学习Vue的学习路线。
一、Vue基础
1. 对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目。
2. 先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令和语法。
3. vue的生命周期很重要,了解这点以后可以免去很多问题。
4. 学完这些可以做一些练手的小项目。
5. 现在可以开始学习使用vue-cli构件项目了,学习组件化之前,推荐先看一下es6关于模块的介绍。阮一峰《ECMAScript6》 Module
6. 光会这些还是不够的,还得会一些npm基础,知道如何用git-bash来安装依赖,会一些常用的命令。这方面的知识可以参阅npm入门文档
7. 看完这些就可以试着将之前的写的demo用搭建的vue-cli来实现。
8. 多看看组件那里,看看如何在vue-cli中怎么实现组件化,说白了,vue玩的就是组件。
9. 到这里vue基础篇就结束了。你还可以有条件的参阅剩下的官方文档里面的进阶篇,如果时间有限,就直接进入vue-router
二、Vue-router
1. 和之前一样,推荐直接用html+js过一遍文档
2. 对路由导航钩子得好好看一看。
3. 看完文档就可以上手vue-cli,一般新手在这几天都会死活跑不出来。
4. 最直接的方法就是去github上搜一些关于vue-router2.0的demo,看如何构件路由,如何构件项目目录。
5. 如果能跑出来,就可以做一些小项目了,比如写一个知乎日报啊
,这些demo在github上很多。
7. 可以结合一些组件库写demo,这样可以更加了解组件化。比如饿了么团队的Element、mint-ui
三、Vuex
什么是vuex?
Vuex 是一个专门为 Vue.js 应用设计的 状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务,其中的规则确保状态只能按预期方式变更。说白了就是控制应用的一些全局状态。状态改变了,对应的视图也会改变。
1. 在学习Vuex时,会有一些ES6特性,当遇到这些时,最好不要一带而过,去好好看一看这些es6特性。
2. 比如在学习Action时可以看看ES6新增的Promise和参数解构。
3. 实践的方法一样是先看别人别人写的代码,比如官方的购物车实例的应用结构。
4. 把之前写的demo优化一下,有些地方可以用用vuex。
5. vuex主要是用来对不同组件间进行通信,它构建了一个Vue实例的全局数据与方法,这些数据与方法可以在该Vue实例的所有组件中getter与setter。
到此,恭喜你已经成功入门Vue了。还学会了一点ES6,,附带一点Webpack。
如果你刚接触Vue,这篇文章可能对你帮助不大,接下来我会写一些具体使用的文章。
Vue学习路线的更多相关文章
- vue文章学习路线
vue学习笔记(一)入门 Vue实现简单的购物车功能 vue学习笔记(二)vue的生命周期和钩子函数 使用webstorm搭建vue-cli项目 vue-cli项目中引入第三方插件 vue-cli项目 ...
- VueJs2.0建议学习路线
最近VueJs确实火了一把,自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢. 既然大家会看这篇文章,那么 ...
- Android 技能图谱学习路线
这里是在网上找到的一片Android学习路线,希望记录下来供以后学习 1Java 基础 Java Object类方法 HashMap原理,Hash冲突,并发集合,线程安全集合及实现原理 HashMap ...
- JavaWeb的学习路线
JavaWeb的学习路线 一.BS结构 B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起后的一种网络结构模式,WEB浏览器是客户端最主要的应用软件.这种模式统一了客户端,将 ...
- Vue2.5学习路线及基础知识总结。
在接触新技术不了解时,我喜欢去慕课网上看新手教程,在学习vue时,在慕课网上看了几个老师的视频,发现这挺好,讲到挺详细的,适合新手,有兴趣的可以先看一下,vue2.5入门教程. 然后在学习路上看见了一 ...
- 2019最新WEB前端开发小白必看的学习路线(附学习视频教程)
2019最新WEB前端开发小白必看的学习路线(附学习视频教程).web前端自学之路:史上最全web学习路线,HTML5是万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次 ...
- vue学习起步:了解下
渐进式 有这么一句话,vue是渐进式框架. 抽取“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?中的解释: 渐进式代表的含义是:主张(主张指使用时的硬性要求)最少.来个对比就知道什么叫主张 ...
- Web前端新手经典学习路线
做前端开发八九年的时间,到2015年的时候,Web前端因为HTML5技术的高速发展,成为IT行业中最受欢迎和未来需求人才发展最好的职业,各个行业都想转行做前端开发,包括一些在校的学生,土木工程,一些不 ...
- 【强烈推荐】可能是最适合你的 Java 学习路线和方法
如遇链接无法打开,建议使用 https://github.com/Snailclimb/JavaGuide/blob/master/docs/questions/java-learning-path- ...
随机推荐
- js小题目(持续更新)
总是感觉之前做过的问题很久没碰的话就会忘掉,于是打算专门开一个记录小题目的随笔当题典用. 目录 五种主要数据类型进行值复制 数组去重 数组去重并计数 实现clone()方法,对五种主要数据类型进行值复 ...
- 【高精度&想法题】Count the Even Integers @ICPC2017HongKong/upcexam5563#Java
时间限制: 1 Sec 内存限制: 128 MB Yang Hui's Triangle is defined as follow. In the first layer, there are two ...
- 【数论&想法题】小C的问题 @"科林明伦杯"哈尔滨理工大学第八届程序设计竞赛
Time Limit: 1000 MS Memory Limit: 256000 K Description 小C是一个可爱的女孩,她特别喜欢世界上最稳定的图形:三角形.有一天她得到了n根木棍,她把这 ...
- Schaepher 博客目录
update: 2017-03-16 福州大学2015年秋软件工程实践课 软工课程作业目录 软工实践课程总结 团队博客 软件案例分析优秀链接汇总 Android Android学习笔记: (一):th ...
- Hibernate(1)基本知识
hibernate初步 1.概述 ①hibernate是java应用和关系数据库之间的桥梁,是一个开源的对象关系映射框架,可用来把对象模型表示的java对象 映射到关系型数据库表中去. ②hibern ...
- IDEA手工添加webapp目录
自己手工建目录,是没法识别的,在自己手工建的webapp文件夹上右键菜单,Make Directory As也没有相应的选项 解决方案是 File->Project Structure
- SAP S/4 1610 IDES + HANA 2.0 安装
前几天安装的都没带演示数据 ,这个版本带DEMO数据,学习比较好 我的机器配置: 内存:128G CPU:E5-2618L V4 硬盘:1T SSD 安装在VMware虚拟机中,安装完后,虚拟机大小只 ...
- hive sql 里面的注释方式
如果建表ddl 用 comment 这个没问题 那么在sql 语句里面呢,这个貌似不像mysql 那样能用 # // /* */ (左边这些都不行) 其实用 -- comment 就行啦 貌似上面的- ...
- Glide4 用法总结 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- Session variables lost after the call of Response.Redirect method
From: https://forums.asp.net/t/2096848.aspx?Session+variables+lost+after+the+call+of+Response+Redir ...