教程演示🔗

Vue 3 Fundamentals 

Vue 3 基础

讲师：Ben Hong

《Vue 3 基础教程》是一门由 Ben Hong 授课的在线前端开发课程，旨在教授使用 Vue.js 这一流行的 JavaScript 框架进行前端开发。该课程包含丰富的内容，总计约 7 小时的学习时间，并覆盖了以下主题：

1. 课程介绍（00:00:00 – 00:04:37）：Ben Hong 介绍了课程的背景和目标受众，以及课程前提条件。还讨论了课程资源和教学格式的概述。
2. Vue 概述（00:04:38 – 00:14:15）：Ben 讲解了 Vue.js 是什么以及为什么要考虑使用 Vue，包括 Vue 具有可控、高性能、多用途、社区优先和企业验证等特点。还展示了一些使用 Vue 的应用示例。
3. 创建 Vue 应用（00:14:16 – 00:20:51）：Ben 简要讨论了创建 Vue 应用的先决条件，并演示了如何创建一个基本的 Vue 应用，介绍了从 CDN 直接引入 Vue 的方式，并配置了一个定义的配置对象。
4. 指令（Directives）（00:20:52 – 00:32:32）：Ben 演示了如何使用以 “v-” 前缀开头的独特属性，称为指令，包括 v-if、v-else 和 v-for 等，以在表达式的值发生更改时对 DOM 进行反应性更新。还回答了有关 Vue 2 和 Vue 3 的区别、为什么 v-for 指令在 li 元素上而不是 ul 元素上、以及数据属性是否是必需的等学生问题。
5. 事件处理和视图模型（00:48:39 – 01:01:58）：Ben 演示了在 Vue 中处理事件、定义方法以及使用 v-on 和 v-bind 指令来调用这些方法，以增加页面的交互性。还介绍了 v-model 指令，该指令可用于创建双向绑定。
6. 计算属性和观察者（Watchers）（01:17:42 – 01:26:16）：Ben 演示了如何使用 watch 选项来在响应式属性更改时触发函数，以及如何使用计算属性（computed properties）来声明式地计算派生值。
7. Vue 工具（01:41:32 – 01:45:29）：Ben 讨论了如何使用 Vue CDN 渐进式增强网站，并提供了 GitLab 迁移其应用程序到 Vue 的简要演示。
8. 创建 Vue 应用工具（01:45:30 – 02:01:57）：Ben 演示了如何使用基于 Vite 的脚手架工具 create-vue 创建新的 Vue 应用程序，以及生成的应用程序内容和 Vue 开发工具的功能。
9. 自定义组件（02:13:47 – 02:22:32）：Ben 演示了如何在 Vue 中创建自定义组件，并通过在 exports 中注册它们将所有相关的 JavaScript 和 HTML 代码封装在一个特定文件中。
10. Props（02:31:08 – 02:38:26）：Ben 讲解了如何通过声明 props 来将数据传递给组件，并回答了有关将函数作为 props 传递的问题。
11. 自定义事件传递（02:49:50 – 03:00:43）：Ben 讨论了如何定义和触发自定义事件，以及如何使用 Vue 开发工具来注册 DOM 事件。回答了有关多层次事件传递和 Vue 2 中是否存在 emit 等问题。
12. 插槽（Slots）用于布局（03:14:41 – 03:30:06）：Ben 演示了如何使用插槽将模板片段传递给子组件，以便让子组件在其模板中渲染片段。还讨论了如何附加 props 和 if-else 条件到插槽以实现更多的灵活性和可重用性。
13. 获取数据（03:33:39 – 03:47:43）：Ben 演示了如何在 Vue 中异步获取数据，并解释了生命周期钩子的工作原理。
14. 状态管理与 Pinia（06:28:32 – 06:38:43）：Ben 讨论了如何使用 Vue 的状态管理库 Pinia 定义和管理全局状态，包括 getters 和 actions。
15. VueUse 钩子和 Vue 过渡（06:50:08 – 06:53:46）：Ben 介绍了 VueUse 中有用的钩子，如使用 useStorage 访问本地存储以及使用 useColorMode 设置颜色首选项。还简要讨论了 Vue 中的过渡和过渡组件。
16. 部署 Vue 应用（06:53:47 – 07:00:18）：Ben 演示了如何将 Vue 应用连接到 GitHub 账户并使用 Netlify 进行部署，以便在仓库更改时进行自动重新构建。
17. 课程结束（07:00:19 – 07:01:21）：Ben 提供了关于下一步学习的建议，包括 Nuxt 和 TypeScript，还提供了 Ben 的社交媒体链接。

这门课程旨在帮助学习者掌握 Vue.js，从而能够构建灵活的前端应用程序。无论你是初学者还是

有一定经验的开发者，都可以从中受益匪浅。课程内容丰富，覆盖了 Vue.js 的核心概念和实际应用，涵盖了从基础到高级的主题。

总的来说，这门课程包括以下内容：

• Vue.js 的基本概念和优势。
• 如何创建和配置 Vue 应用。
• 使用指令（Directives）来实现数据的响应性更新。
• 事件处理和视图模型，包括自定义事件的传递。
• 计算属性和观察者（Watchers）的使用。
• 使用插槽（Slots）来实现布局的灵活性和可重用性。
• 异步数据获取和处理。
• 如何使用 Vue Router 实现路由导航。
• 使用 Pinia 进行状态管理。
• 针对性的 VueUse 钩子和 Vue 过渡的应用。
• 如何将 Vue 应用部署到生产环境。

无论你是想要入门 Vue.js 还是深入学习其高级特性，这门课程都为你提供了清晰的指导和实际的示例。学完后，你将具备构建 Vue.js 项目、进行前端开发以及部署应用程序的能力。

如果你对前端开发或 Vue.js 感兴趣，这门课程将为你提供全面的知识和实践经验，帮助你成为一名更加熟练的前端开发者。