当前位置: 首页 > news >正文

跟着ai辅助学习vue3

第一章:基础入门(1 - 2 周)

1. 了解 Vue 3 概述
  • 阅读官方文档简介
    • 访问 Vue 3 官方文档,在首页或简介板块中,重点了解 Vue 3 相较于 Vue 2 的重大变革。比如,Vue 3 采用了 Proxy 实现响应式系统,在性能上有显著提升,尤其是在处理大规模数据时,数据劫持的效率更高。
    • 了解 Composition API 的引入,它解决了 Options API 在代码复用和逻辑组织上的痛点,让代码结构更加清晰,易于维护和扩展。例如,当一个组件包含多个不同功能的逻辑时,使用 Composition API 可以将这些逻辑拆分成独立的组合函数,避免代码在 datamethodscomputed 等选项中分散。
  • 观看入门视频
    • 在哔哩哔哩、YouTube 等视频平台上搜索 “Vue 3 入门教程”。像一些知名博主会通过实际案例展示 Vue 3 的使用场景和效果,让你对 Vue 3 有一个直观的认识。
    • 观看视频时,关注博主如何快速搭建一个简单的 Vue 3 应用,以及如何在界面上显示动态数据,初步感受 Vue 3 的便捷性。
2. 搭建开发环境
  • 安装 Node.js 和 npm
    • 访问 Node.js 官方网站,根据自己的操作系统选择合适的版本进行下载安装。安装过程中按照提示进行操作,安装完成后,打开命令行工具(如 Windows 的命令提示符或 PowerShell,Mac 的终端)。
    • 在命令行中输入 node -vnpm -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

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

相关文章:

  • 【C++】IO流
  • Kubernetes控制平面组件:etcd(二)
  • 播客自动化实操:用Make自动制作每日新闻播客
  • Java每日精进·45天挑战·Day19
  • 嵌入式 Linux 驱动开发:点灯大法
  • SpringBoot中使用MyBatis-Plus详细介绍
  • C++ 网络编程
  • 安卓逆向(签名校验)
  • SQL 注入漏洞原理以及修复方法
  • 开源语音克隆项目 OpenVoice V2 本地部署
  • 数据治理常用的开源项目有哪些?
  • CAS单点登录(第7版)2.规划
  • 数据结构与算法之排序算法-(计数,桶,基数排序)
  • 阿里云上线 DeepSeek,AI 领域再掀波澜
  • UE C++ UObject 功能的初步总结
  • 工作室如何实现一机一IP
  • moveable 一个可实现前端海报编辑器的 js 库
  • 进阶关卡 - 第4关 - InternVL 多模态模型部署微调实践
  • 第二月:学习 NumPy、Pandas 和 Matplotlib 是数据分析和科学计算的基础
  • CAS单点登录(第7版)7.授权
  • 谷神星一号海射型遥五运载火箭发射成功
  • AI快速迭代带来知识焦虑,褚君浩院士提出“四维能力模型”
  • 体坛联播|雷霆抢七淘汰掘金,国米错失意甲登顶良机
  • 美国恶劣天气已造成至少28人死亡
  • 外媒:哈马斯一名高级指挥官尸体被发现,系辛瓦尔弟弟
  • 国际博物馆日|在辽宁省博物馆遇见敦煌