七天之内学习 Vue.js 的有效策略

规划和战略阶段

执行阶段

结束语

不废话。这是我为实现目标而采取的行动计划和策略

在不到七天的时间内学习Vue.js是我最近的挑战之一。起初，我对自己能否实现这一目标心存疑虑。
在遵循本文即将揭示的下一个实用 Vue.js 学习方法之前，我曾一度误以为是错误的。

我以为那些在不同领域知识渊博的人天生就拥有特殊的力量。但我完全错了。

正如有人所说：

“除非你知道如何去做，否则一切都会很困难。”

大学毕业并获得计算机科学硕士学位后，我开始了自学之旅。

在这次旅程中，我意识到超级学习者和其他人之间的区别基本上在于学习的方式。

我对如何根据个人需求构建学习地图一无所知，更不知道如何确定我的动力是什么（是内部力量还是外部力量）。

虽然听起来有些老套，但树立正确的心态对于用更少的时间和精力实现目标至关重要。
如果我们现在开始讨论与 Vue.js 相关的技术细节，那么有几个关键点需要考虑。

选择官方文档和视频课程的形式可以节省你很多时间，让你更快地熟悉主要概念。
好了，让我们来看看我在不到七天的时间内学习 Vue.js 的具体行动计划。

免责声明：

这只是一个指南，为您提供学习 Vue.js 时取得成功的关键因素列表。

结果可能会因不同因素而异，例如您的经验水平（在本例中主要指 JavaScript、HTML 和 CSS）。就我而言，我学习了 Vue.js 的基础知识，并获得了不错的代码速度，但随着我继续开发 Vue.js 项目，我逐渐掌握了更复杂的概念。

如果您想更快地学习任何东西，您需要关注两个关键阶段。

规划和战略阶段

您要坚持的计划和策略将在您掌握所有与 Vue.js 相关的概念和元素的速度方面发挥重要作用。

构建学习地图

选择一门课程并直接进入学习是我们在学习新知识时常犯的错误之一。

你想解决这个问题吗？那就从构建学习地图开始吧。它将帮助你理解所有你想学习的内容。

简单来说，就是根据你自己的需求而制定的个性化指南。

好吧，这些听起来都不错，但我该如何真正构建学习地图呢？别担心，我们现在就开始吧。

要构建学习地图来学习 Vue.js，你需要考虑三个主要事项，这样才能提高你的学习速度。

1. 是什么驱使你学习？

构建学习地图的第一步就是要诚实地思考是什么驱使你学习。这是一种内在力量还是外在力量？

如果这是一种内在力量，那就意味着你对前端有着真正的热情，并且你可能完全专注于掌握 Vue.js 框架的每一个细节。

外部动机意味着你学习它是因为公司需要你为即将到来的项目学习它，或者因为它是一个流行的、按需的框架，你想搭上这趟车。

但你对学习它还不够感兴趣。

为什么了解动机类型如此重要？
原因很简单。因为可能有一些章节或内容与动机类型无关，所以你可以跳过它们，留到以后再看。

清楚了解了是什么促使您学习后，您现在就可以投入时间和精力去学习。

2. 建立学习结构

构建学习结构的目的是找到最快的途径来掌握某个主题。通过这样做，你将加快理解 Vue.js 的工作原理及其涉及的所有概念。

构建学习结构时需要考虑两件事：概念和事实。

概念是您需要了解的有关 Vue.js 的所有基础知识和原理，而事实是您必须记住的所有真实的事情。

关于 Vue.js 的概念和事实

截至撰写本文时，应该学习哪个版本？Vue 2 还是 3？

基于 Vue.js 的应用程序有哪些常见/流行的技术栈？
熟悉最常见和最常用的 Vue.js 概念。

事实与困境

首先，让我们来谈谈您在开始学习 Vue.js 生态系统后可能会遇到的一些事情。

学习哪个 Vue 版本合适？

当我开始学习 Vue.js 时，这个问题很快就出现了，所以你可能也会遇到同样的困境。

稍微研究一下，深入研究一下，不要太担心。重点是要清楚你为什么选择版本 2 或 3。

我建议你从总体上进行比较。例如，以下 Reddit 帖子可以让你深入了解两个版本之间的区别：

学习 Vue 2 还是 3？
我应该学习 Vue 2 还是 3？

基于 Vue.js 的应用程序的常见/流行的技术栈是什么？

了解学习内容对于提高学习速度至关​​重要。
你需要了解构建 Vue.js 应用时常用的技术栈，这样才能将时间和精力投入到这些特定的元素上。

这是一个常见的 Vue.js 技术栈：

• 框架：Vue 2/3
• 路由：vue-router
• 打包工具：WebPack
• UI 工具包/框架：Element UI、Vuetify。
• 状态管理：VueX

常见概念

现在您已经更好地了解了正确的 Vue.js 版本和您想要关注的堆栈，现在是时候跳转到属于 Vue.js 的基础知识、概念和独特之处了。

• Vue 实例：每个 Vue.js 应用程序都是从创建一个新Vue实例开始的。

• 数据和方法：Vue创建实例时，它会添加在data object toVue 的反应性系统中找到的所有属性。

• 实例生命周期钩子（不同于生命周期钩子）：这是在创建 Vue 实例时运行的一系列步骤（init, beforeCreate, created等等）。

• 生命周期钩子：让用户能够在特定阶段（mounted, updated, destroyed等）添加自己的代码的功能。

• 模板语法：Vue.js 使用基于 HTML 的模板语法，允许你以声明方式将渲染的 DOM 绑定到底层 Vue 实例的数据。模板语法包括插值、指令和简写（例如v-bind, v-on）。

• 计算属性：允许您处理复杂的逻辑和操作。它们是根据依赖关系进行缓存的计算。

• 观察者：允许你执行异步或高开销的操作来响应数据变化。它们允许你跟踪任何属性并对其任何更改做出反应。

• 类和样式绑定：允许您操作类和内联样式。您可以传递数据来应用特定的类或样式。

• v-if, v-else, v-show, and v-for条件渲染：Vue.js 允许您使用不同的指令（例如）来决定是否显示块、组件或元素。

• 事件处理：监听来自 DOM 的事件、事件处理程序、内联处理程序、事件修饰符。

• 表单输入绑定：使用 v-model 指令在表单输入上创建双向数据绑定。

• 组件基础知识：组件是可重复使用的 Vue 实例，其名称类似于<button-counter>。

• 使用 props 向子组件传递数据：Props 是可以在组件上注册的自定义属性。传递给子组件的 props 将成为该子组件的属性。

这些概念是开始使用 Vue.js 时最常见或最有用的。

3. 选择正确的资源

通过构建学习结构，你找到了学习 Vue.js 的最快途径。现在是时候研究其他高效学习者正在使用的正确资源和方法了。正如《Ultralearning》一书的作者 Scott Young所说：

“花一两个小时来找出正确的资源以及‘人们如何才能做好这件事’是一项非常有用的投资。”

Vue.js 官方指南（约 3-6 小时）

我建议你先阅读Vue.js 官方文档。由于这是你第一次使用 Vue.js，你可能无法掌握和消化所有信息。不用担心，没关系。

选择评价较高的视频课程（约 10-15 小时）

再次强调，在学习旅程的这个阶段，您不应该担心课程中的所有内容。

视频课程将帮助你加快学习进度，弥补你阅读 Vue.js 官方指南后产生的理解差距。

本课程旨在帮助学员理解 Vue.js 的基础知识。学习时间大约为 10-15 小时。学习期间，请尝试使用番茄工作法，避免倦怠。

我建议参加以下 Vue.js 课程。其中一些是免费的，还有一些相当便宜，所以没有理由不参加。

课程：

• 使用 VueJS 2 进行开发（完整的 Vue.js 路由器和 Vuex 课程）。

• Vue 精通

• Vue.js 基础知识

执行阶段

此时，您已经拥有正确的心态、学习路线图和正确的资源来完成 Vue.js 路线图。

为了尽可能多地了解 Vue 的世界，你需要遵循一系列步骤。现在是时候执行计划了。

注意：请记住，从第 0 天到第 7 天都需要执行以下步骤。

教给自己或孩子（费曼技巧的一部分）

如果你能用简单的英语解释你所学到的知识，那么毫无疑问你已经取得了两件事：

• 你对主题及其要素非常清楚。你无法解释你不理解的内容。

• 您将这些知识存储在长期记忆中，而不是工作记忆中。

对于任何令人困惑或不清楚的概念，试着向自己或孩子解释，不要使用专业术语或晦涩难懂的词汇。我通常会和我四岁的儿子练习这个。这其实并不容易。但当他能够理解我在说什么时，我就知道我也掌握了。

在 YouTube 上直播

真的吗？别担心。你没必要暴露自己——至少现在不需要。

再次强调，这是为了衡量你对所学主题的理解程度。你不需要在 YouTube 上直播，而是选择私密模式。

感到困惑？让我来解释一下。

每当我学习新东西时，我都会做的一个有效的事情就是记录自己。我会试着解释一个令人困惑或复杂的话题，然后看看自己做得怎么样。

我使用 YouTube 是为了简单快捷，但你也可以使用笔记本电脑的工具录制，或者使用任何你觉得舒服的方法。请查看下面的截图。我正在录制如何知道何时使用计算属性和观察器。

我在 YouTube 上直播了，但使用的是私密可见模式。如果你觉得你的解释足够好，甚至可以发布，或者只是把它放在那里，以便以后访问。

写下你所学到的东西

您可能不是一名作家，但这并不意味着您不能记录您的学习过程，最重要的是在您的大脑中建立神经连接以将这些知识存储在您的长期记忆中。

确实，这篇文章是我学习 Vue.js 的成果。我记录了学习过程中最重要的经验教训、概念和要素。

这帮助我更容易记住事情。
把你学到的东西写成博客，会对不同的领域有所帮助，而且最终可能会成为对你有意义的东西。我就是这样经历的——我现在是一名作家。

练习，练习，练习

这显而易见。一旦你对 Vue 的生态系统有了更好的了解，就应该去实现一个项目。我建议从基础项目开始，逐步发展到中级项目。

没有灵丹妙药。你需要反复练习。这是我们开发历程的一部分。我们永远准备不足。我们需要反复学习，反复练习。

结束语

不到七天就学会了 Vue.js，真是一段奇妙的经历。正如我在本文中所概述的，这并不意味着我现在就是 Vue.js 的“老大”。

这意味着我掌握了相关的概念和要素，因为我建立了一个学习地图，加快了我的学习进程。

确定你的学习动机是内在的还是外在的，是决定包含哪些资源以及省略哪些资源的关键因素。

以上所有要点都与要遵循的计划和策略有关。它们将加速你学习 Vue.js 或任何你正在学习的 JS 框架或主题的进程。

然而，执行阶段将帮助你完成学习过程。

学习 Vue.js 时，尝试向自己或孩子解释令人困惑或复杂的概念，不要使用密集的词汇或行话。

另外，试着用简单的英语记录或写下你学到的内容。当你强迫你的大脑用你自己的话解释一个概念时，你会建立神经连接，帮助你将其存储在长期记忆中。

** 编码愉快！**

如果这篇文章对您有帮助，请分享给更多开发者。也欢迎通过我的博客和Medium与我联系。