清河网站建设网络公司中国建设教育协会培训中心官网

第一章：基础入门（1 - 2 周）

1. 了解 Vue 3 概述

• 阅读官方文档简介
  • 访问 Vue 3 官方文档，在首页或简介板块中，重点了解 Vue 3 相较于 Vue 2 的重大变革。比如，Vue 3 采用了 Proxy 实现响应式系统，在性能上有显著提升，尤其是在处理大规模数据时，数据劫持的效率更高。
  • 了解 Composition API 的引入，它解决了 Options API 在代码复用和逻辑组织上的痛点，让代码结构更加清晰，易于维护和扩展。例如，当一个组件包含多个不同功能的逻辑时，使用 Composition API 可以将这些逻辑拆分成独立的组合函数，避免代码在 data、methods、computed 等选项中分散。
• 观看入门视频
  • 在哔哩哔哩、YouTube 等视频平台上搜索 “Vue 3 入门教程”。像一些知名博主会通过实际案例展示 Vue 3 的使用场景和效果，让你对 Vue 3 有一个直观的认识。
  • 观看视频时，关注博主如何快速搭建一个简单的 Vue 3 应用，以及如何在界面上显示动态数据，初步感受 Vue 3 的便捷性。

2. 搭建开发环境

• 安装 Node.js 和 npm
  • 访问 Node.js 官方网站，根据自己的操作系统选择合适的版本进行下载安装。安装过程中按照提示进行操作，安装完成后，打开命令行工具（如 Windows 的命令提示符或 PowerShell，Mac 的终端）。
  • 在命令行中输入 node -v 和 npm -v 来验证安装是否成功。如果成功安装，会显示相应的版本号。
• 使用 Vite 创建 Vue 3 项目
  • 在命令行中执行以下命令来创建一个基于 Vite 的 Vue 3 项目：

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

这里的 my-vue-app 是你项目的名称，你可以根据自己的喜好进行修改。
- 进入项目目录：

cd my-vue-app

- 安装项目依赖：

npm install

- 启动开发服务器：

npm run dev

- 打开浏览器，访问命令行中提示的地址（通常是 `http://localhost:5173`），如果看到一个 Vue 3 的欢迎页面，说明项目创建和启动成功。

• 熟悉项目基本结构
  • 打开项目文件夹，重点关注 src 目录下的文件。App.vue 是项目的根组件，它包含了整个应用的模板、脚本和样式。
  • main.js 是项目的入口文件，在这里会创建 Vue 应用实例并挂载到 DOM 上。了解如何在 main.js 中引入组件和插件。
  • 认识 public 目录，它用于存放静态资源，如图片、图标等。这些资源在打包时会直接复制到最终的构建目录中。

3. 学习基础语法

• 模板语法
  • 插值表达式 {{ }}
    • 在 App.vue 的模板部分，修改 {{ message }} 中的 message 为你自己定义的变量。例如：

<template><div><p>{{ greeting }}</p></div>
</template><script setup>
import { ref } from 'vue';
const greeting = ref('Hello, Vue 3!');
</script>

保存代码后，在浏览器中可以看到界面上显示出 Hello, Vue 3!。尝试修改 greeting 的值，观察界面的更新情况。
- 常用指令
- v-bind（缩写为 :）：用于动态绑定 HTML 属性。例如，给一个 <img> 标签绑定 src 属性：

<template><div><img :src="imageUrl" alt="Vue Logo"></div>
</template><script setup>
import { ref } from 'vue';
const imageUrl = ref('https://vuejs.org/images/logo.png');
</script>

    - **`v-on`（缩写为 `@`）**：用于绑定事件。给一个按钮绑定点击事件：

<template><div><button @click="handleClick">Click me</button></div>
</template><script setup>
const handleClick = () => {alert('Button clicked!');
};
</script>

    - **`v-if`**：用于条件渲染。根据条件显示或隐藏元素：

<template><div><p v-if="isVisible">This text is visible.</p></div>
</template><script setup>
import { ref } from 'vue';
const isVisible = ref(true);
</script>

    - **`v-for`**：用于列表渲染。遍历数组并显示每个元素：

<template><div><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul></div>
</template><script setup>
import { ref } from 'vue';
const items = ref([{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }
]);
</script>

• 响应式原理
  • ref
    • 创建一个 ref 变量并在模板中使用：

<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {count.value++;
};
</script>

注意，访问 ref 变量的值需要使用 .value。
- reactive
- 创建一个响应式对象：

<template><div><p>{{ user.name }}</p><p>{{ user.age }}</p><button @click="increaseAge">Increase Age</button></div>
</template><script setup>
import { reactive } from 'vue';
const user = reactive({name: 'John',age: 30
});
const increaseAge = () => {user.age++;
};
</script>

与 ref 不同，访问 reactive 对象的属性不需要使用 .value。

在第一阶段，要通过不断地编写代码和修改示例来加深对这些基础概念的理解。每学习一个新的知识点，都可以尝试自己编写一些简单的示例来验证和巩固所学内容。