如何快速上手一个新技术之vue学习经验
碰到紧急项目挪别人的vue项目过来直接改,但是vue是18年初看过一遍,18年底再来用,早就忘到九霄云外了,结果丢脸的从打开vue开始学,虽然之前在有道云笔记做了很多记录,然后没有系统整理。所以借这次机会锻炼自己快速上手能力,顺便整理vue相关的资料。
如何快速上手,三个诀窍:去碰问题+提出问题+有效筛选搜索信息。
大概过程就是:
打开index.html没反应——>搜索怎么打开vue项目?——>打开页面后,发现页面和代码里节点不一样,怎么肥事啊?——>发现代码到处都是import,所以学习模块的导入导出和es6语法——导出来的东西是什么?干嘛的?——>学习组件和vuex的知识——>组件数据哪里来的?——>学习组件通信和axios请求以及路由传参——>由请求学习生命周期,钩子函数等知识——>由此又学习了全局弹窗,全局loading方面的知识
基本上就这样来上手的vue,这个过程中,搜索网上的资料,要学会有效筛选自己需要的信息,比如了解到了组件的知识,但是网上定义组件都有几种方法,我就再观察项目的组件看属于哪种定义方式——单文件组件,毕竟是赶项目,时间要紧,后期可以慢慢再研究,方便以后使用。
下面是详细介绍整个学习过程,主要是观察代码,找出关键字搜索:
一来就碰到的问题:按照惯例,直接在chrome打开项目最外层的index.html。没反应,咋回事,突然想起来好像要启动什么才行。
网上搜索如何打开vue项目,记录下笔记:vue学习一:新建或打开vue项目。
打开页面后,在控制台看见页面节点和代码里的不一样。
先观察了页面链接,找到对应的页面文件,再看来下其他页面文件,你会发现代码书写规律:
都有import,export default这种关键字,然后import后面的单词,在页面也有规律的在使用,这就好办了
针对这两个关键字查一波,涉猎到了AMD、CMD、Common规范, ES6模块的导入和导出,最后还有一篇让我明白我之前学ES6的方法有蠢的文章:es6常用语法(这些知识点可以去看我的vue学习笔记)
反面教材学习经验:以前按照ES6官方文档学到对象扩展那里,每句话都要读懂(自以为懂╮(╯▽╰)╭),每个代码看懂,做了大量笔记,但是机顶盒开发用不上,也就忘了。其实知道常用,好用,为什么需要用,的那些语法就行了。
了解模块的导入导出后,那么我要知道导出的这个东西在这个页面干嘛的?
我看被放到了components里,然后在页面又放到了节点里面,就去搜索这个关键字components,了解到了组件的知识,但是网上定义组件都有几种方法,我就再观察项目的组件看属于哪种定义方式——单文件组件。
至此,vue一大核心——组件就被我发现了,就有了vue学习之组件这篇笔记。
页面的组成现在就知道了,接下来是数据部分。
数据是怎么来的,怎么渲染到页面上的?
平时开发项目,页面呈现数据过程:请求数据,处理数据,渲染数据。跟着这个思路,一路自我提问找线索搜索。
这个得倒着找:从渲染数据的地方开始找,顺藤摸瓜找来源。
这里就涉猎到:
vue模板语法,指令(这两个都是官网先走马观花大概知道有哪些,后续用都是现用现查)
每个组件的数据容器有哪些(props,data等)
如何操作这些数据(computed,method,watch等)
这些都搞定了,然后查找数据源:
之前的组件学习让我知道了组件之间的数据传递和共享: vue学习之vuex
但是数据肯定还有ajax请求来的,这个在页面代码里不好看出来,就直接在网上搜索的vue使用ajax请求。就涉猎到了:vue学习之生命周期和钩子函数
至此,我认为差不多搞定了使用vue展现页面的基本套路。
后续就是路由,组件缓存,事件,公共提示,全局loading处理等方面的知识,同上,都是一路观察+自我提问+合适的搜索解决的上手问题。
但是!!!!!!!!!!最后居然把我调去负责这个项目机顶盒端的开发,移动端就又这么完美错过。。。。。。。
平时的积累真的很重要,你脑袋记不住东西没关系,跟我一样可以做大量的收藏和笔记,技术到用时才不会方恨少。
千万不要让自己呆在一个舒适区,前端新技术层出不穷,改朝换代也快,不说学习,至少随时关注了解,多逛逛社区,看看别人做的东西,这样选技术方案的时候,才不至于不会盲目跟风。
做项目就跟织毛衣一样,接到需求的时候就跟拿到一团打结的毛线,先找到线头,从线头顺藤摸瓜把打结的地方都梳理开,线梳理好后,再根据你要的成品考虑选择用什么材质和粗细的针棒来织,然后考虑选择怎么个织法最便捷快速。
这些针棒和编制方式来源于你的积累:
常逛的园子:博客园,开源中国,csdn,segmentfault,w3cplus
技术问答网站:stackoverflow
找轮子,看新奇:github,codepen,runjs
没事干的时候技术升级打怪网站:freecodecamp
帮别人解决问题同时提升自己,欢迎加入这个温暖的群,群相关信息:https://www.kancloud.cn/jsfront/month/82796
资料收藏技巧:关注“前端早读课”,“前端大全”等公众号,每天早上吃个饭或者坐个地铁搭个电梯的时间就能看几篇文章了,把自己想收藏的技术文章分类收藏到有道云笔记,需要查什么的时候可以在有道云笔记搜索,想要学什么的时候可以搜出一大堆,把别人的总结起来变成自己的知识体系。
如何快速上手一个新技术之vue学习经验的更多相关文章
- webpack快速入门——webpack3.X 快速上手一个Demo
1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...
- 学习Keras:《Keras快速上手基于Python的深度学习实战》PDF代码+mobi
有一定Python和TensorFlow基础的人看应该很容易,各领域的应用,但比较广泛,不深刻,讲硬件的部分可以作为入门人的参考. <Keras快速上手基于Python的深度学习实战>系统 ...
- .Net·如何快速上手一个项目?
阅文时长 | 0.61分钟 字数统计 | 1029.6字符 主要内容 | 1.引言&背景 2.步入正题,如何快速上手一个项目? 3.声明与参考资料 『.Net·如何快速上手一个项目?』 编写人 ...
- better-scroll快速上手及封装(vue项目)
愿你有诗有梦,有坦荡荡的远方 本文声明:这是一篇学习coderwhy老师的vue2课程的一个笔记,所以本文章是在vue项目中实现,没学过vue的大佬们可以举一反三. 使用场景及介绍 BetterScr ...
- (2/24) 快速上手一个webpack的demo
写在前面:该部分的安装都是基于windows系统的,且此处的webpack的版本为:3.6.0. 1.安装webpack 1.1 安装方法: 用win+R打开运行对话框,输入cmd进入命令行模式.然后 ...
- Python编程快速上手——让繁琐工作自动化学习笔记
第一部分 基本语法 1.字符串不能直接和数字相加,要用str()转一下:但是可以和数字相乘,用于表示多个字符串复制:字符串不能和浮点数直接结合,字符串可以和字符串直接相加: 2.输入函数用input( ...
- 基于Asp.net core + EF + Sqlite 5分钟快速上手一个小项目
虽然该方法不会用在实际开发中,但该过程对于初学者还是非常友好的,真应了麻雀虽小,五脏俱全这句话了.好了不多废话了,直接开始!! 1.建立一个名为test的Asp.net core web应用程序 这一 ...
- 麻雀虽小,五脏俱全。基于Asp.net core + Sqlite 5分钟快速上手一个小项目
虽然该方法不会用在实际开发中,但该过程对于初学者还是非常友好的,真应了麻雀虽小,五脏俱全这句话了.好了不多废话了,直接开始!! 1.建立一个名为test的Asp.net core web应用程序 这一 ...
- vue学习起步:了解下
渐进式 有这么一句话,vue是渐进式框架. 抽取“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?中的解释: 渐进式代表的含义是:主张(主张指使用时的硬性要求)最少.来个对比就知道什么叫主张 ...
随机推荐
- codeblocks: 使用静态(static)链接库(pcre)的配置
说明:在c/c++程序中使用静态链接库,编译后不再需要相关的dll文件(如:libpcre-1.dll,libpcreposix-0.dll)就可以正常的运行. 现在遇到一个问题,如果使用 pcre_ ...
- eCharts使用图表简单示例
https://blog.csdn.net/hlbt0112/article/details/48862427 1. eCharts官网 http://echarts.baidu.com/index. ...
- Codeforces Round #523 (Div. 2) B Views Matter
传送门 https://www.cnblogs.com/violet-acmer/p/10005351.html 这是一道贪心题么???? 题意: 某展览馆展览一个物品,此物品有n堆,第 i 堆有a[ ...
- mybatis下载地址(所有版本)
https://github.com/mybatis/mybatis-3/releases,这个github里面几乎包含了所有的没有batis
- CodeForces1073E 数位dp+状压dp
http://codeforces.com/problemset/problem/1073/E 题意 给定K,L,R,求L~R之间最多不包含超过K个数码的数的和. 显然这是一道数位dp,在做的过程中会 ...
- Storm中重要对象的生命周期
Spout方法调用顺势 declareOutputFields()(调用一次) open() (调用一次) activate() (调用一次) nextTuple() (循环调用 ) deactiva ...
- java socket / No buffer space available
s https://www.cnblogs.com/yiwangzhibujian/p/7107785.html Socket用在哪呢,主要用在进程间,网络间通信. https://www.cnblo ...
- linux之awk命令获取最后一列
统计分析中经常用的awk命令,其中用的最多的还是切分 cat test | awk -F',' '{print $1,$2} 能够很好的将记录按照需要切分开, 但是如何获取最后一列呢? 可以使用aw ...
- CentOS7 下编译 Hadoop
准备工作 下载 Hadoop 源码 Source (当前最新 2.9.2) https://hadoop.apache.org/releases.html 打开压缩包会看到 BUILDING.txt ...
- JAVA核心技术I---JAVA基础知识(集合set)
一:集合了解 (一)确定性,互异性,无序性 确定性:对任意对象都能判定其是否属于某一个集合 互异性:集合内每个元素都是无差异的,注意是内容差异 无序性:集合内的顺序无关 (二)集合接口HashSet, ...