一块学Vue:萌新的Vue学习日记 - 开篇

最新推荐文章于 2024-03-14 11:11:48 发布

KoManX

最新推荐文章于 2024-03-14 11:11:48 发布

阅读量432

点赞数 3

分类专栏：前端一块学Vue 文章标签：一块学 Vue 前端学习&amp;分享

本文链接：https://blog.csdn.net/qq493919692/article/details/103748533

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

一块学Vue

6 篇文章 0 订阅

订阅专栏

有没有跟我一样想学习Vue的小伙伴？一起呀！互相督促，互相帮助，互相分享心得~没有的话我等会再来问！

最重要的声明

最最最最最重要的先说：不是推销培训班！就是想一块学习官方文档，然后互相分享一些所想所得而已！

萌新抱团互相督促~

好的，声明说完了，开始正文。

简介

文章前部分（碎碎叨叨），就先闲聊一会儿吧，第一次写博客，讲讲以前学习的事还有前段时间完成的一个练习网页，不感兴趣的可以直接跳过。

后部分（接下来的学习计划），会放上我对接下来想怎么学习Vue的一些想法，看了觉得还可以的小伙伴可以参与进来呀！

碎碎叨叨

综合这么多年的学习经历吧，一个人自学，真的是困难重重。动力全靠自体产热，热情来了，连着好几天捧着文档看得停不下来。连着几天爆发总得休息吧，那就休息一天再接着看嘛。

然而现实总是反反复复得重演，教练，坡上停车熄火了就老点不上，咋回事啊，你这小破车是不是该换换了？

不知道你们怎么样，反正我的小破车一熄火是很难再点不上，学习过程中，一放松个什么一整天，就停不下来了，时间一转就是四五天后才惊诧，咦，怎么时间过得这么快，该学习了该学习了！

唉，总是这么断断续续的，我太难了啊。所以，有没有小伙伴一块学VUE呀，互相监督呀！

其实Vue在大学里也算是久闻大名了，中文学习文档，丰富的生态圈，blabla…不过那时也没真正了解过，也就没什么学习的想法。

就跟着选修课的老师去学习了一段时间的Angular,那时候学Angular真的，网上的东西也难找，官方文档又看的模模糊糊，还是靠着云盘分享的免费视频研究来研究去才勉强做出个样子来完成期末作业。

说到这个，还不得不说那时候学mongoDB，我的妈，那百度出来的教程，也不知道是讲老版本的呢还是别的开发环境的，他也没讲，反正内容就是查询然后一个冒号贴一张图，删除冒号贴一张图，blabla，几张图几个字，我那是一篇文章一篇文章试过来就是不行，重点是运行不了我还不知道为什么，我的电脑有问题？

折腾了半天，发现，原来nodejs得配合mongoose才能玩mongoDB，我又去看mongoose官方文档，那会儿mongoose中文文档也是不全的，而且很多我看中文居然理解不了，得重新看英文才行，英语4级都没过的渣渣看得头皮发麻，折腾了许久才明白到底怎么用。

知道了怎么用之后，只想吐槽一句，那时候但凡我能找到一篇认真点的教学文章，不是几分钟就能学会初步应用了嘛！最基础的增删改查指令都还搞不清，就上来给我讲一堆原理结构啥的，这是在打击我的学习热情啊。

唉，可能也是我那时候性子不行吧，百度的结果看完了前两页就懒得翻了。

不知道现在有没有很快就能找到的关于nodejs+mongoose对mongoDB做基础操作应用的教学，如果现在看的小伙伴有还没了解过的，可以留言，我来分享一下，让你几分钟看完就会增删改查这些基础操作，完成一下学校的小作业还是没问题的。

一直都知道三大框架好使呀，angular、react、vue，但这angular我都没学明白，感觉是自己基础不好，其他两个也就没想过去了解一下。

决定好好补补基础，后面就开始原生js写些小组件做练习…emmm 有点累的，浏览器兼容性问题到还好,毕竟就自己练习，也不怎么切换浏览器，主要还是对于css的get/set,class的增删操作，动画的实现啥的，用jquery真的是轻松多了。

随着练习项目的变大，还是忍不住投入了jquery的怀抱，手动狗头~

之前有段时间想着做一个动画多一点的网页，就是随着鼠标滚动，不断触发动画来进行内容的切换。所有动画都自己来写，写起来内容繁杂而且改动贼麻烦，有机会我发一下这个练习源码，瞄两眼就能体会到了。

好了，叨叨了半天，终于要被我真正说回来了！我为什么突然想学Vue。就是做完了这个网页，感觉我这样做的模式有问题啊，就突然想去看一下Vue框架，想知道Vue框架是怎么做动画的。

然后…我看了Vue官方教程视频，链接如下：https://learning.dcloud.io/#/?vid=0

一直到看完，我的心情都很复杂，真的，就是那种，那种很特别的，你们懂的吧。

总之，请原谅我的见识少，我为什么就没有早点鼓起动力来了解，来学Vue，就光看完视频我就感觉这也太好用了吧！这能提升多少开发效率啊！

特别是我还刚用自己想的那一套花费了好多时间才折腾完了网页，唉，没有对比真的没有伤害。本来写完网页虽然感觉写的好麻烦，但是自己摸索出了点东西，还是有点欣慰的。

我自个想的是，动画只放在js中实现，css只需设定好动画组件在正常状态该有的样式，不管进入动画怎么样，别到css文件中去设置动画初始状态。

举个小栗子：

需求：一个按钮的进入动画是从左往右渐入的同时宽度变大，正常状态位置是在div里水平垂直居中。

框架：DOM操作使用了JQuery，动画实现用了JQuery Transit。

(只是举个小例子，贴代码就贴的简单点了，写了关键部分，意会一下就好)

<div class="example-box">
   <button class="example-box__button">hi!</button>
</div>

.example-box{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}
.example-box__button{
    position:relative;
    width:200px;
    height:30px;
}

//按钮加载完成后，样式设置为开始动画前
$(".example-box__button").css({opacity:0,left:"-10px",width:"150px"});

//按钮开始动画
$(".example-box__button").transition({opacity:1,left:"0",width:"200px"});

具体实现的时候遇到问题是不少的。

问题1：重复内容

我的顺序是先写好html和css，毕竟是自己设计嘛，得看一下静态效果，满意了再开始处理动画。

就像上面那样写，一开始写的时候感觉不明显，但是写多了突然发现，比如上面动画相关的opacity、left、width属性，特别是width属性，正常状态的数据在css中写过一次，在js中的transition函数中又写过一次，其他两个（opacity、left）默认值就等于正常状态的数据，所以倒没有在css中写。但是width属性，js中写了，css那里写的很没意义了呀。

然而意识到这点的时候，我css已经全写完了，要是边写动画边打开css文件去注释掉重复项吧有点嫌麻烦，不注释又难受。当时写的时候，只能硬着头皮，都注释了吧。

问题2：重用麻烦

比如我想要再加两个需求：

①这个按钮离开可视窗口后，会触发动画：从下往上渐出。

②按钮再次进入可视窗口时，会按照之前的进入动画：从左往右渐入。

这就写起来很麻烦了，得给离开动画添加回调函数，让离开动画结束后，再将按钮样式设置为开始动画前。

然后，因为回调函数必须动画完成才会执行，所以还需要把stop函数的goToEnd参数设置为true，保证回调函数的运行。

//进入动画相关代码
$(".example-box__button").stop(true,true);
$(".example-box__button").animate({opacity:1,left:0,width:"200px"});

//离开动画相关代码
$(".example-box__button").stop(true,true);
$(".example-box__button").animate({opacity:0,top:"-20px"},()=>{
	$(".example-box__button").css({
		opacity: 0,
		left: '-50px',
		top: 0,
		width: '150px',
    });
});

这样写呢，动画一多，这样要添加的量就贼大。而且如果我有个新需求，要的效果就是离开动画无需执行到底就马上开始进入动画，那回调函数就运行不了了。

面对这样的需求，我那时还是想了个办法，把重置样式的代码放到进入动画前面。

//进入动画相关代码
$(".example-box__button").stop(true,false);
$(".example-box__button").css({
        opacity: 0,
        left: '-50px',
        top: 0,
        width: '150px'
});
$(".example-box__button").animate({opacity:1,left:0,width:"200px"});

//离开动画相关代码
$(".example-box__button").stop(true,false);
$(".example-box__button").animate({opacity:0,top:"-20px"});

emmm，这样写暂时还没遇到什么大问题，就是真正写项目的时候，进入动画的代码块和离开动画的代码块离得有点远，需要翻好一会儿，比如上面的top属性，我就得在离开动画这边记住了，然后去进入动画那里保证它也被初始化。

不过！我可是发现了Vue的动画处理方案能很好处理我这些问题的，后面得好好学一下，手动狗头~

那时候做完的网页录了个短视频：

叨叨的最后一句：反正我是被官方的教学视频直击内心了，我要学Vue!

接下来的学习计划

学习内容：Vue中文文档以及衍生内容

学习方法：

1.每天自行学习中文文档指定范围的内容以及衍生内容。

2.记录下每日学习所得，编写测试文档。

3.写下明天的目标。

下面详细讲一下吧。

学习内容

Vue中文文档

我们打开Vue官网：https://cn.vuejs.org/

右上方导航栏，有学习和生态系统两个标签。

我没看具体内容，大概看下标题，感觉需要学习的内容有：

学习标签下的全部内容

生态系统标签下的工具、核心插件全部内容

学习顺序

我打算先从学习标签下的文档标签下的教程开始看。

点击上面的教程两个字就能转到相应的页面。

Vue的教程页面已经很友好得在左边列表排列了教程内容，我们只要跟着这个顺序学下去就好。

其他内容的学习顺序，我准备先把这基础的教程看完再做决定~

那么，所谓的衍生内容是指什么？

我现在已经看完了Vue官方教程视频，链接如下：https://learning.dcloud.io/#/?vid=0。

学习标签下的教程内容，我前短时间暂时只看到基础部分的列表渲染。

看文档的过程中，其实能发现文档中会出现一些绿色加粗的字，点击之后就会跳转到其他内容，那这部分内容虽然有一些可能是后面很快就要学习到的，但是我还是愿意都把他们归成是衍生内容。

还有就是，比如我在基础/计算属性和侦听器/侦听器中看到示范代码里有出现：

使用axios-js来实现ajax

使用_.debounce来实现去抖，同时提到了他的近亲用来节流的_.throttle

使用了_.capitalize来将字符串转换成首字母大写,其他字母小写的字符串

axios-js、_.debounce、_.throttle、_.capitalize这些都是衍生内容。

需要去了解他们、做好记录、写好测试文件。

总之，看到不知道，不清楚的，就去好好认识她一下就完事了！

我的学习方法

我也不太清楚大家是怎么学习的，反正我的学习方法还是很简单的。抛砖引玉嘛，我就先说说我自己的方法。

像上面那句讲的，只要看到自己不知道，不清楚的，都去多少了解一下，要是感觉重要的就认真了解一下。

说真的，好奇心很重要，而且要让它爆发出来！别像我以前一样感觉先学好基础再去了解Vue，然后就完全不去了解Vue了。完全可以找点时间出来先粗略的了解一下，不管能了解到多少，比起自己闷头学基础都是一种眼界的提高吧，平时想问题的思维有了一定借鉴后也会完全不一样。

了解完知识，记录关键内容，做好测试文档也不能懈怠。

我不太喜欢把大篇大篇的原理啊介绍什么的放在我的记录文档里，但是时间久了肯定还是会忘的，所以我一般都是会理解了之后，自己记一遍，然后放个链接在文档，以后点开链接稍微看一下就能很快回忆起来了。

我的记录文档里一般都是放一些比较关键的内容，比如说这是干嘛的，该怎么用，具体效果如何（文字描述），或者是自己联想到的一些用法什么的。

我的测试文档呢，就是把需要了解的内容写成具体的代码实现一遍，运行出来就能看到具体效果。测试的结果通过文字版写在记录文档里。或者直接写在测试文档中的网页里也是可以的，这样可以直接打开测试文档中的网页就能浏览所有内容。

举个栗子说明下这两个文档：

就拿我了解_.debounce时做的操作举例。

1.创建好目录和文档：

测试文档是debounce.html

记录文档是des.js

2.了解_.debounce的情况

我是直接打开他的官方文档来看的。链接：https://lodash.com/docs#debounce

3.写测试文档

看官方文档呢，了解到他基础功能只需要函数的func和wait两个参数就能实现。

选项中还有三个参数：leading、maxWait、trailing，来扩充功能。

那测试文档就是把基础功能实现一遍，再把选项中的三个参数都拿出来做一遍测试，看看他们取各种值时的表现是怎样的，他们的组合效果又是怎样的。

4.写记录文档

先结合官网和刚刚测试下来的感觉，自己写一下这个函数是用来干嘛的，需要注意哪些。

再将几个参数分别代表什么意思，以及相应的测试情况记录下来。

我把_.debounce、_.throttle、_.capitalize相关的记录文档和测试文档都上传到Github和码云上了，想看一下具体内容的可以看一下，地址在下面分享&其他中。后续我也会把他们写成博客。

分享&其他

我创建了github项目LearnTogether-Vue，

来存储以后与一块学Vue相关的所有资料以及我自己记录每天所学知识的相关文档。

有时候github打开比较慢，我也在码云同步了这个项目。

github链接：https://gitee.com/KomanX/LearnTogether-Vue

码云链接：https://gitee.com/KomanX/LearnTogether-Vue

上面提到的Loadsh几个函数，我已经把他们相关的文档上传到了github，放在StudyAboutLodash文件夹下。

接下来也会慢慢把手上的文档都上传到github，且编写成博客。

然后每天记录自己的学习成长之路。加油！

其他

关于IDE

原来呢，我是一直在用vscode。不过看到Vue官方视频教程上推荐的HBuilderX好像也挺不错的，特别是我后面想要了解一下微信小程序的开发，所以我下载了HBuilderX，准备接下来使用这个来学习开发。

要注意的是，vscode快捷键跟HBuilderX快捷键是不一样的。这里有两个选择，你可以在HBuilderX中直接设置快捷键为vscode的快捷键，也可以像我准备做的是学习一下HBuilderX的快捷键。HBuilderX的快捷键在顶部栏工具标签下自定义快捷键里就可以方便的查看了，都是中文备注哦~学起来还是很容易的，就是改变手的习惯可能会花点时间。

HBuilderX的其他妙用我暂时也还不是很了解，后面好好研究~

还有想说的就是，真的很推荐准备开始学Vue的小伙伴，可以在刚开始学习基础教程的时候，也挤出点时间，同时了解风格指南，这里面讲了很多代码编写的规范。符合规范的代码真的会很棒！我也一直在努力让自己写出规范漂亮的代码来。

风格指南链接：https://cn.vuejs.org/v2/style-guide/

所以，有没有跟我一样想学习VUE的小伙伴？一起呀！

我们可以一块分享每天所见所闻所学的内容，互补所缺，互相找茬找漏洞啥的才能更快进步嘛。