碰到紧急项目挪别人的 vue 项目过来直接改, 但是 vue 是 18 年初看过一遍, 18 年底再来用, 早就忘到九霄云外了, 结果丢脸的从打开 vue 开始学, 虽然之前在有道云笔记做了很多记录, 然后没有系统整理. 所以借这次机会锻炼自己快速上手能力, 顺便整理 vue 相关的资料.
如何快速上手, 三个诀窍: 去碰问题 + 提出问题 + 有效筛选搜索信息.
一来就碰到的问题: 按照惯例, 直接在 Chrome 打开项目最外层的 index.html. 没反应, 咋回事, 突然想起来好像要启动什么才行.
如何打开 vue 项目?
网上搜索如何打开 vue 项目, 记录下来 vue 学习一: 新建或打开 vue 项目 https://www.cnblogs.com/yaoyao-sun/p/10319618.html
在 Chrome 打开页面后, 在控制台查看自己要改的部分, 在页面结构找到对应的部分去项目代码里面找, 找得我一脸懵逼
页面和代码里不一样的节点哪里来的?
先观察了页面链接, 找到对应的页面文件, 再看来下其他页面文件, 你会发现代码书写规律:
都有 import,export default 这种关键字, 然后 import 后面的单词, 在页面也有规律的在使用, 这就好办了
针对这两个关键字查一波, 涉猎到了 AMD,CMD,Common 规范, ES6 模块的导入和导出, 最后还有一篇让我明白我之前学 ES6 的方法有蠢的文章: es6 常用语法 https://www.cnblogs.com/libin-1/p/6716470.html
反面教材学习经验: 以前按照 ES6 官方文档学到对象扩展那里, 每句话都要读懂 (自以为懂╮(╯▽╰)╭), 每个代码看懂, 做了大量笔记, 但是机顶盒开发用不上, 也就忘了. 其实知道常用, 好用, 为什么需要用, 的那些语法就行了.
知道了模块的导入导出后, 那么我要知道导出的这个东西在这个页面干嘛的?
我看被放到了 components 里, 然后在页面又放到了节点里面, 就去搜索这个关键字 components, 了解到了组件的知识, 但是网上定义组件都有几种方法, 我就再观察项目的组件看属于哪种定义方式 -- 单文件组件.
至此, vue 一大核心 -- 组件就被我发现了, 就有了 vue 学习之组件 https://www.cnblogs.com/yaoyao-sun/p/10363246.html
页面的组成现在就知道了, 接下来是数据部分.
数据是怎么来的, 怎么渲染到页面上的?
平时开发项目, 页面呈现数据过程: 请求数据, 处理数据, 渲染数据. 跟着这个思路, 一路自我提问找线索搜索.
这个得倒着找: 从渲染数据的地方开始找, 顺藤摸瓜找来源.
这里就涉猎到:
vue 模板语法, 指令 (这两个都是官网先走马观花大概知道有哪些, 后续用都是现用现查)
每个组件的数据容器有哪些 (props,data 等)
如何操作这些数据 (computed,method,watch 等)
这些都搞定了, 然后查找数据源:
之前的组件学习让我知道了组件之间的数据传递和共享: vue 学习之 vuex https://www.cnblogs.com/yaoyao-sun/p/10361351.html
但是数据肯定还有 Ajax 请求来的, 这个在页面代码里不好看出来, 就直接在网上搜索的 vue 使用 Ajax 请求. 就涉猎到了: vue 学习之生命周期和钩子函数 https://www.cnblogs.com/yaoyao-sun/p/10361091.html
至此, 我认为差不多搞定了使用 vue 展现页面的基本套路.
后续就是路由, 组件缓存, 事件等方面的知识, 同上, 都是一路观察 + 自我提问 + 合适的搜索解决的上手问题.
但是!!!!!!!!!! 最后居然把我调去负责这个项目机顶盒端的开发, 移动端就又这么完美错过.......
平时的积累真的很重要, 你脑袋记不住东西没关系, 跟我一样可以做大量的收藏和笔记, 技术到用时才不会方恨少.
千万不要让自己呆在一个舒适区, 前端新技术层出不穷, 改朝换代也快, 不说学习, 至少随时关注了解, 多逛逛社区, 看看别人做的东西, 这样选技术方案的时候, 才不至于不会盲目跟风.
做项目就跟织毛衣一样, 接到需求的时候就跟拿到一团打结的毛线, 先找到线头, 从线头顺藤摸瓜把打结的地方都梳理开, 线梳理好后, 再根据你要的成品考虑选择用什么材质和粗细的针棒来织, 然后考虑选择怎么个织法最便捷快速.
这些针棒和编制方式来源于你的积累:
常逛的园子: 博客园, 开源中国, csdn,segmentfault 等
技术问答网站: Stack Overflow
找轮子, 看新奇: GitHub,codepen,runjs
没事干的时候技术升级打怪网站: freecodecamp
帮别人解决问题同时提升自己, 欢迎加入这个温暖的群, 群相关信息: https://www.kancloud.cn/jsfront/month/82796
资料收藏技巧: 关注 "前端早读课","前端大全" 等公众号, 每天早上吃个饭或者坐个地铁搭个电梯的时间就能看几篇文章了, 把自己想收藏的技术文章分类收藏到有道云笔记, 需要查什么的时候可以在有道云笔记搜索, 想要学什么的时候可以搜出一大堆, 把别人的总结起来变成自己的知识体系.
来源: http://www.bubuko.com/infodetail-2957553.html