跟着ai辅助学习vue3

第一章：基础入门（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 项目：

bash 复制代码

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

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

bash 复制代码

cd my-vue-app

复制代码

- 安装项目依赖：

bash 复制代码

npm install

复制代码

- 启动开发服务器：

bash 复制代码

npm run dev

复制代码

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

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

3. 学习基础语法

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

vue 复制代码

<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 属性：

vue 复制代码

<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`（缩写为 `@`）**：用于绑定事件。给一个按钮绑定点击事件：

vue 复制代码

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script setup>
const handleClick = () => {
  alert('Button clicked!');
};
</script>

复制代码

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

vue 复制代码

<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`**：用于列表渲染。遍历数组并显示每个元素：

vue 复制代码

<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 变量并在模板中使用：

vue 复制代码

<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
创建一个响应式对象：

vue 复制代码

<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。

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