如何快速上手一个新技术之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

     资料收藏技巧:关注“前端早读课”,“前端大全”等公众号,每天早上吃个饭或者坐个地铁搭个电梯的时间就能看几篇文章了,把自己想收藏的技术文章分类收藏到有道云笔记,需要查什么的时候可以在有道云笔记搜索,想要学什么的时候可以搜出一大堆,把别人的总结起来变成自己的知识体系。

   

原文地址:https://www.cnblogs.com/yaoyao-sun/p/10390498.html