热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue学习路线

前言:学习Vue已经两个月了,目前前端的框架用得比较多的就是Bootstrap和Vue,而Bootstrap是开发人员用得较多,因为较为简单,上手也快。Vue是目前很火的数据驱动框,17年的时候

前言:学习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,这篇文章可能对你帮助不大,接下来我会写一些具体使用的文章。

出处:http://www.cnblogs.com/0zcl
文章未标明转载则为原创博客。欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

文章来源于https://www.cnblogs.com/0zcl/p/9981040.html


   



推荐阅读
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • Symfony是一个功能强大的PHP框架,以其依赖注入(DI)特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]
  • Vue 项目构建与部署指南
    本文将指导您完成Vue项目的构建和部署过程,包括环境搭建、项目初始化及配置、以及最终的部署步骤。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 尽管某些细分市场如WAN优化表现不佳,但全球运营商路由器和交换机市场持续增长。根据最新研究,该市场预计在2023年达到202亿美元的规模。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • ASP.NET MVC中Area机制的实现与优化
    本文探讨了在ASP.NET MVC框架中,如何通过Area机制有效地组织和管理大规模应用程序的不同功能模块。通过合理的文件夹结构和命名规则,开发人员可以更高效地管理和扩展项目。 ... [详细]
  • 深入解析 Spring Security 用户认证机制
    本文将详细介绍 Spring Security 中用户登录认证的核心流程,重点分析 AbstractAuthenticationProcessingFilter 和 AuthenticationManager 的工作原理。通过理解这些组件的实现,读者可以更好地掌握 Spring Security 的认证机制。 ... [详细]
  • 深入解析Java虚拟机(JVM)架构与原理
    本文旨在为读者提供对Java虚拟机(JVM)的全面理解,涵盖其主要组成部分、工作原理及其在不同平台上的实现。通过详细探讨JVM的结构和内部机制,帮助开发者更好地掌握Java编程的核心技术。 ... [详细]
  • Node.js与npm安装及Vue项目搭建指南
    本文详细介绍了如何安装Node.js和npm,以及如何使用npm安装Vue及其相关工具,包括vue-router和vue-cli,并创建一个简单的Vue项目。 ... [详细]
  • 日期:2013年3月19日 来源:GBin1.com 对于希望启动并运行首个网站的新手而言,选择一个合适的CMS或免费平台是至关重要的第一步。本文将为您介绍一系列关于WordPress的设计开发资源和手册,帮助您迅速掌握网站构建技巧。 ... [详细]
  • vue 如何将输入框的输入自动小写转大写(使用 vmodel 时采取另一种方式)
    前言:小写转大写,可以用过滤器实现,但当使用v-model时就不行了,这里有解决方案。转载请注明出处:http ... [详细]
author-avatar
香水百合-2012
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有