2023 年 7 个适合初学者的 Vue.js 教程

这个精心挑选的列表将帮助 Vue 初学者找到七个很棒的资源来开始学习 Vue。
我相信你来这里是为了寻找一些资源来开始学习 Vue.js 框架的奇妙旅程,无论是作为第一个工具还是你熟悉的其他框架的附加工具。不管怎样,你很幸运,因为这就是我们将在这篇文章中介绍的内容。
随着现代 Web 应用程序对更多功能、复杂性、可访问性和性能的需求不断增加,开发人员面临着更艰巨的任务,即交付满足现代用户需求的高质量 Web 应用程序。
为了帮助实现这一目标,我们开发了经过深思熟虑的代码块,这些代码块提供了作为库和框架存在的一致且标准化的应用程序结构,以进一步增强开发人员的能力并简化将优秀应用程序交付到生产环境中所涉及的流程。
多年来,已经开发出了许多出色的前端框架/库,每个框架/库都有其独特的方式来开展业务,为 Web 应用程序构建动态、数据驱动的用户界面。在这篇文章中,我们将关注这一长串框架中的重要人物;根据StackOverflow 2021 年 Web 框架流行度统计,Facebook 的 React.js 排名第一,其次是 Google 的 Angular 和 Vue.js。
乍一看,根据上面介绍的受欢迎程度统计数据和科技巨头的支持,你可能会想大惊小怪地放弃 Vue.js,但尝试以这种方式解释统计数据可能会产生一些误导性的结果。你可能会感兴趣的是,虽然 Vue.js 创建的时间较晚,但与较早出现的另外两个相比,Vue.js 在 2014 年创建,在撰写本文时,Vue 拥有最高的 GitHub 星数,为 190k,超过了 React 的 185k 和 Angular 的 80k 。这展示了 Vue.js 是如何发展并在业界真正流行的。
这三个框架都有其独特之处,但它们的架构有一些相似之处。众所周知,Vue.js 的核心结合了 React 和 Angular 的大部分最佳功能。Vue.js 使用虚拟 DOM,这是使 React 快速的相关功能之一。Vue.js 也是基于组件的,使用双向数据绑定并采用声明式方法——Angular 和 React 共享的架构。因此,所有三个框架都遵循传统的 MVC 模式。Vue.js 还与 Angular 共享类似的模板语法。

先决条件

在学习 Vue 之前,读者必须至少对三种核心 Web 技术——HTML、CSS 和 JavaScript 有一定的了解。

为什么要学习 VueJS?

在我们开始讨论如何做之前,这里列出了一些需要考虑的“原因”。

  1. Vue.js 是一个渐进式框架,这仅仅意味着它允许你根据需要在小型、中型或大型项目中采用和集成它,即,Vue 提供了我们将其完全集成到任何项目中所需的所有灵活性(其中将控制我们的整个应用程序)或部分地仅处理应用程序的某些部分。
  2. 凭借出色的文档和活跃的社区支持的高度可定制性和简单性,Vue.js 实现了非常平滑的学习曲线,从而加快了团队和公司的采用速度
  3. 这个框架的简单性(这绝不意味着使用上的限制)意味着,无论 Vue 如何使用,我们仍然提供了一个工具箱,允许构建最先进的 Web 应用程序,无论是简单的还是复杂的,根据需要无缝扩展。
  4. 此外,Vue.js 现在被很多公司使用,例如阿里巴巴、Google、Gitlab、Upwork、Apple、Facebook 等。通过学习 Vue 被该行业聘用的可能性非常高。

如何学习 Vue

以下是一些顶级教程、书籍和相关文章的列表,可以帮助你尽快开始使用 Vue.js。
需要注意的是,本指南中提供的大部分资源可确保你了解最新版本的 Vue,即版本 3.x,它仍然完全向后兼容 Vue 2.0 或更低版本。你的学习路径必须利用该技术的最新版本及其附带的新功能,原因有几个——最突出的是 Vue.js 的官方文档已移至 Vue 3。
Vue 3 附带了一些基于 Vue 2 构建的新功能,例如引入组合 API(它允许你开发更好的组件并提高 Web 应用程序的可重用性)、传送组件以及对 TypeScript 的开箱即用支持; 更好地优化捆绑大小等。如果你已经熟悉 Vue 2,可以下载此备忘单以查看迁移指南。
以下是学习 Vue 的七个最佳教程的链接的快速列表,下面我将详细介绍每个教程:

Vue - 完整指南(包括路由器和组合 API)
本课程由Maximilian Schwarzmüller创建并上传到 Udemy。该课程目前的评分为 4.8 星,好评如潮。根据课程描述,该课程从头开始非常详细地教授最新版本的 Vue (Vue.js 3)。
该课程还涵盖了所有核心基础知识,但并不止于此,它还深入探讨了高级概念,例如 Vue 3 中引入的 Composition API。还需要注意的是,这是一门付费课程。

Vue视频教程,Vue2 Vue3实战精讲,一套通关vue
本套Vue视频教程从Vue2开始讲解,一步一个案例,知识点由浅入深,然后很自然的过度到Vue3版本。
视频中会把每一个Vue的知识点讲解的非常通透,不但举例告诉你怎么用,还会告诉你底层实现原理。
本套视频中会从零手写一个Vue的数据代理机制,都是源码级的讲解。

Vue School 初学指南
Vue School 为各个级别的开发者提供了丰富的免费和付费视频,帮助他们动手学习如何使用 Vue 框架。对于初学者部分,你将看到一组有序的资源,你可以在其中学习框架的核心概念 - 包括组件是什么,如何创建它们(即使用选项或组合 API),了解 props 以及如何重用组件。你还将了解 Vue.js 应用程序中组件的生命周期、创建和管理状态、列表渲染指令、事件处理等等。
此处提供的课程描述适用于指南的免费部分。但是,你始终可以通过参加高级课程来升级并进一步提高你的灵活性,这些课程仍然是这个初学者系列的一部分,以进一步提高。

Vue JS 初学者(60 个视频)
本系列由 Codevolution YouTube 频道创建,是一个非常适合初学者的指南,从头开始,涵盖了在最基本的层面上熟悉 Vue.js 所需的所有必要概念。
你首先学习如何正确设置开发环境,然后了解在应用程序中使用 Vue.js 的各种方法,包括使用 Vue CLI 构建工具的流行方法。然后你将了解组件、指令、观察者、槽、选项、组合 API 等。
本文是一个非常适合初学者的指南,从头开始,涵盖了在最基本的层面上熟悉 Vue.js 所需的所有必要概念。
你首先学习如何正确设置开发环境,然后了解在应用程序中使用 Vue.js 的各种方法,包括使用 Vue CLI 构建工具的流行方法。然后你将了解组件、指令、观察者、槽、选项、组合 API 等。
本指南将逐步引导你从基本概念到与框架相关的更高级概念。

全栈 Vue 3
它是最畅销的 Vue.js 书籍之一,由高级软件工程师 Hassan Djirdeh 撰写,由 Nate Murray 和 Ari Learner 共同撰写。它们都是不断发展且活跃的学习社区(称为 newline)的一部分。本书为任何级别的开发人员提供了全面的指南,帮助他们掌握 Vue 的几乎所有核心••功能以及 Vue 生态系统中的丰富工具;在本指南中,你将学习使用最佳实践构建世界一流的 Web 应用程序的所有概念。
你将从逐步理解框架开始;如何以传统方式设置开发环境,即使用脚本标签和 Vue CLI,并逐渐接触其他概念,例如指令、事件处理、高级状态管理、路由、组合 API、测试等。
本书通过实践指南涵盖了这些内容,你将在其中构建多个 Web 应用程序,从投票应用程序、日历事件应用程序、笔记应用程序、购物车等开始。每个应用程序都会让你接触到使用一个或多个 Web 应用程序。更多框架的核心功能。

Vue 官方文档
正如你可能已经推断出的那样,这些文档准确地描述了有关框架及其功能的每个细节。文档中有很多部分,每个部分都描述框架的一个方面或如何使用框架的一个或多个功能。
对于初学者,你可以获得教程部分,其中提供了了解大部分 Vue 基础知识的实践指南。你还配备了一个编码游乐场,让你可以轻松地进行编码,并在完成教程系列时亲自动手。重要的是,尽管浏览了本指南中的所有其他资源,你仍然可以将文档作为参考来进一步调整你对 Vue 的理解。

其他资源

Vue 3 要点备忘单
Vue 3备忘单〔 Vue 精通〕
Vue 速查表 | 终极版

结尾

尽管互联网上有许多教程、课程和书籍可以学习任何技术,但本指南为你提供了一些特别精心挑选的宝贵资源,以开始你掌握 Vue.js 框架的旅程。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容