Vue3 学习教程，从入门到精通，使用 VSCode 开发 Vue3 的详细指南（3）

使用 VSCode 开发 Vue3 的详细指南

本文将详细介绍如何使用 Visual Studio Code (VSCode) 开发 Vue3 项目，包括创建项目、打开项目、运行第一个入门程序，并涵盖关键的语法知识点及使用方法。每个知识点都将提供具体的案例代码，并附有详细注释。此外，还将提供一些入门案例，帮助您快速上手 Vue3 开发。

目录

1. 准备工作
2. 创建 Vue3 项目
3. 在 VSCode 中打开 Vue3 项目
4. 运行第一个入门程序
5. Vue3 关键语法知识点及案例代码
   • 5.1 组件基础
   • 5.2 数据绑定
   • 5.3 指令
     • 5.3.1 v-bind
     • 5.3.2 v-if / v-else-if / v-else
     • 5.3.3 v-for
     • 5.3.4 v-on
     • 5.3.5 v-model
   • 5.4 计算属性与侦听器
     • 5.4.1 计算属性
     • 5.4.2 侦听器
   • 5.5 生命周期钩子
   • 5.6 组件通信
     • 5.6.1 Props
     • 5.6.2 Emit
     • 5.6.3 Provide/Inject
   • 5.7 组合式 API
     • 5.7.1 setup 函数
     • 5.7.2 ref 和 reactive
     • 5.7.3 computed 和 watch
6. 入门案例
   • 案例1：简单的计数器
   • 案例2：待办事项列表
   • 案例3：动态表单
7. 总结

---

1. 准备工作

在开始之前，请确保您已经完成以下准备工作：

1. 安装 Node.js：Vue3 项目依赖于 Node.js 环境。可以从 Node.js 官网 下载并安装最新的 LTS 版本。

2. 安装 VSCode：从 VSCode 官网 下载并安装最新版本的 VSCode。

3. 安装 Vue CLI（可选）：虽然可以使用 Vite 创建 Vue3 项目，但 Vue CLI 也是一个常用的工具。可以使用以下命令全局安装 Vue CLI：

   npm install -g @vue/cli
   

4. 安装 Vue 3 相关插件（可选）：在 VSCode 中安装 Vue 3 相关的扩展，如 Volar（推荐用于 Vue 3）、ESLint、Prettier 等，以增强开发体验。

2. 创建 Vue3 项目

使用 Vite 创建 Vue3 项目是一个现代且高效的选择。以下是具体步骤：

1. 打开终端：在 VSCode 中使用快捷键 Ctrl + ~ 或通过菜单 终端 > 新终端 打开终端。

2. 运行创建命令：

   npm create vite@latest my-vue3-app -- --template vue
   

   这将使用 Vite 创建一个名为 my-vue3-app 的 Vue3 项目。

3. 进入项目目录：

   cd my-vue3-app
   

4. 安装依赖：

   npm install
   

3. 在 VSCode 中打开 Vue3 项目

1. 打开 VSCode。

2. 打开项目：

   • 选择 文件 > 打开文件夹...。
   • 选择刚刚创建的 my-vue3-app 文件夹并打开。

   或者，在终端中运行：

   code .
   

   （确保 VSCode 的命令行工具已安装）

4. 运行第一个入门程序

1. 启动开发服务器：

   在终端中运行：

   npm run dev
   

   这将启动开发服务器，并显示本地服务器的地址（通常是 http://localhost:5173/）。

2. 查看应用：

   打开浏览器，访问 http://localhost:5173/，您将看到 Vue3 的欢迎页面。

3. 修改代码：

   打开 src/App.vue 文件，尝试修改

   标签的内容，例如：

   保存文件后，浏览器会自动刷新，显示修改后的内容。

5. Vue3 关键语法知识点及案例代码

5.1 组件基础

Vue3 使用组件化的架构，组件是 Vue 应用的基本构建块。每个组件包含三个部分：模板（Template）、脚本（Script）和样式（Style）。

案例代码：

说明：

• 模板（Template）：定义了组件的 HTML 结构，使用 {{ message }} 进行数据绑定。
• 脚本（Script）：包含组件的逻辑，data 返回组件的数据，methods 定义组件的方法。
• 样式（Style）：使用 scoped 属性确保样式仅作用于当前组件。

5.2 数据绑定

数据绑定是 Vue 的核心特性之一，允许将数据与 DOM 元素进行绑定，实现动态更新。

案例代码：

说明：

• v-model 指令实现了双向数据绑定，用户的输入会实时更新 name 数据，反之亦然。

5.3 指令

指令是带有 v- 前缀的特殊属性，用于在模板中绑定数据或添加行为。

5.3.1 v-bind

用于动态绑定 HTML 属性。

案例代码：

说明：

• v-bind:src 动态绑定图片的 src 属性。
• : 是 v-bind 的简写形式。

5.3.2 v-if / v-else-if / v-else

用于条件渲染。

案例代码：

说明：

• 根据 count 的值，渲染不同的段落。

5.3.3 v-for

用于循环渲染列表。

案例代码：

说明：

• v-for 遍历 items 数组，渲染每个元素。
• :key 属性用于优化渲染性能，通常使用唯一标识符。

5.3.4 v-on

用于绑定事件监听器。

案例代码：

说明：

• v-on:click 绑定点击事件，@click 是简写形式。
• handleClick 方法在按钮点击时触发。

5.3.5 v-model

实现双向数据绑定。

案例代码：

说明：

• 用户在输入框中输入的内容会实时更新 message 数据，反之亦然。

5.4 计算属性与侦听器

5.4.1 计算属性

用于根据现有数据计算出新数据。

案例代码：

说明：

• discountedPrice 是一个计算属性，根据 price 计算折扣后的价格。

5.4.2 侦听器

用于监听数据的变化并执行相应操作。

案例代码：

说明：

• watch 侦听 username 的变化，并在控制台输出变化前后的值。

5.5 生命周期钩子

Vue 组件有多个生命周期钩子，可以在特定的生命周期阶段执行代码。

案例代码：

说明：

• mounted 钩子在组件挂载后执行，启动一个定时器。
• beforeUnmount 钩子在组件卸载前执行，清除定时器。

5.6 组件通信

5.6.1 Props

用于从父组件向子组件传递数据。

父组件代码：

子组件代码：

说明：

• 父组件通过 props 向子组件传递 parentMessage 数据。
• 子组件通过 props 接收 message 数据。

5.6.2 Emit

用于子组件向父组件发送事件和数据。

子组件代码：

父组件代码：

说明：

• 子组件通过 $emit 触发 messageSent 事件，并传递数据。
• 父组件监听 messageSent 事件，并更新 receivedMessage 数据。

5.6.3 Provide/Inject

用于祖先组件向后代组件传递数据。

祖先组件代码：

后代组件代码：

说明：

• 祖先组件通过 provide 提供 message 数据。
• 后代组件通过 inject 接收 message 数据。

5.7 组合式 API

组合式 API 是 Vue3 引入的一种新的编写组件逻辑的方式，提供了更灵活的代码组织方式。

5.7.1 setup 函数

setup 函数是组合式 API 的入口，返回的对象中的属性和方法将暴露给模板。

案例代码：

说明：

• setup 函数中定义了 count 和 increment。
• ref 用于创建响应式数据。

5.7.2 ref 和 reactive

ref 和 reactive 是组合式 API 中用于创建响应式数据的函数。

案例代码：

说明：

• reactive 创建响应式对象 user。
• 修改 user 的属性会触发视图更新。

5.7.3 computed 和 watch

组合式 API 中使用 computed 和 watch 实现计算属性和侦听器。

案例代码：

说明：

• computed 创建计算属性 discountedPrice。
• watch 侦听 price 的变化，并在控制台输出变化前后的值。

6. 入门案例

案例1：简单的计数器

代码：

说明：

• 使用 ref 创建响应式数据 count。
• increment 和 decrement 方法用于修改 count 的值。
• 模板中绑定按钮的点击事件，实现计数功能。

案例2：待办事项列表

代码：

说明：

• 使用 ref 创建响应式数据 todos。
• addTodo 方法添加新的待办事项，removeTodo 方法删除指定事项。
• 模板中展示待办事项列表，并提供添加和删除功能。

案例3：动态表单

代码：

说明：

• 使用 reactive 创建响应式对象 form。
• submitForm 方法用于处理表单提交。
• 模板中展示动态表单，并显示提交的数据。

7. 总结

本文详细介绍了如何使用 VSCode 开发 Vue3 项目，包括创建项目、打开项目、运行程序，以及关键的语法知识点和案例代码。通过这些内容，您应该能够快速上手 Vue3 开发，并深入理解其核心概念和用法。

建议

1. 深入学习 Vue3 官方文档：官方文档是学习 Vue3 的最佳资源，涵盖了从基础到高级的内容。
2. 实践项目：通过实际项目练习所学知识，积累经验。
3. 加入社区：参与 Vue 社区，与其他开发者交流，获取帮助和灵感。
4. 学习周边技术：如 Vue Router、Vuex 或 Pinia、Axios 等，构建完整的 Vue 应用。