当前位置: 首页 > 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

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

相关文章:

跟着ai辅助学习vue3

第一章&#xff1a;基础入门&#xff08;1 - 2 周&#xff09; 1. 了解 Vue 3 概述 阅读官方文档简介 访问 Vue 3 官方文档&#xff0c;在首页或简介板块中&#xff0c;重点了解 Vue 3 相较于 Vue 2 的重大变革。比如&#xff0c;Vue 3 采用了 Proxy 实现响应式系统&#xff…...

什么是Mustache

Mustache 是一种轻量级模板引擎&#xff0c;用于将变量插入到模板中生成最终的文本输出。它的设计简单且易于使用&#xff0c;适用于多种编程语言&#xff0c;包括 JavaScript、Python、Ruby、Java 等。 Mustache 的模板语法使用双大括号 {{}} 包裹变量或表达式&#xff0c;用…...

C++,STL容器适配器,priority_queue:优先队列深入解析

文章目录 一、容器概览与核心特性核心特性速览二、底层实现原理1. 二叉堆结构2. 容器适配器架构三、核心操作详解1. 容器初始化2. 元素操作接口3. 自定义优先队列四、实战应用场景1. 任务调度系统2. 合并K个有序链表五、性能优化策略1. 底层容器选择2. 批量建堆优化六、注意事项…...

1.综述 Google 的软件工程读书笔记

Google 的软件工程由Google的多位资深工程师合著&#xff0c;分享了他们在管理Google庞大代码库&#xff08;超过20亿行代码&#xff09;过程中总结的经验教训。这本书不仅涵盖了软件工程的理论知识&#xff0c;还结合了Google的实际案例&#xff0c;展示了如何在大规模、复杂的…...

vue框架生命周期详细解析

Vue.js 的生命周期钩子函数是理解 Vue 组件行为的关键。每个 Vue 实例在创建、更新和销毁过程中都会经历一系列的生命周期阶段&#xff0c;每个阶段都有对应的钩子函数&#xff0c;开发者可以在这些钩子函数中执行特定的操作。 Vue 生命周期概述 Vue 的生命周期可以分为以下几…...

复杂电磁环境下无人机自主导航增强技术研究报告——地磁匹配与多源数据融合方法,附matlab代码

本文给出介绍和matlab程序&#xff0c;来实现地磁辅助惯性导航仿真验证&#xff0c;包含地磁基准图构建、飞行轨迹生成、INS误差建模、地磁匹配定位及多源数据融合等模块。通过对比分析验证地磁匹配修正惯性导航累积误差的有效性&#xff0c;可视化显示卫星拒止环境下的航迹修正…...

蓝桥杯---排序数组(leetcode第912题)

文章目录 1.题目重述2.思路分析3.代码解释 1.题目重述 题目的要求是不使用库函数或者是其他的内置的函数&#xff08;就是已经实现好的函数&#xff09;&#xff0c;也就是这个排序的逻辑需要我们自己进行实现&#xff1b; 2.思路分析 其实这个例子也是很容易理解的&#xff…...

考研高数复习规范

前言 这里记录我的高数复习规范与规划&#xff0c;希望能给需要考研的同学一点启发 规范原因 高数的内容很多&#xff0c;关键的是&#xff1a;会做题、拿高分首先最重要的就是抓住概念。比如有界无界的概念&#xff0c;间断点的概念、极限的概念其次是做题过程中得到的方法…...

Stable diffusion只换衣服的方法

大概看了几个帖子感觉说的都不是很清楚&#xff0c;也大部分都是保持人物一致性&#xff0c;不能只改变衣服&#xff0c;自己摸索了一下&#xff0c;需要使用三个controlnet&#xff1a;一个openpose、一个lineart&#xff0c;一个depth&#xff0c;三个controlnet使用同一个参…...

无人机航迹规划: 梦境优化算法(Dream Optimization Algorithm,DOA)求解无人机路径规划MATLAB

一、梦境优化算法 梦境优化算法&#xff08;Dream Optimization Algorithm&#xff0c;DOA&#xff09;是一种新型的元启发式算法&#xff0c;其灵感来源于人类的梦境行为。该算法结合了基础记忆策略、遗忘和补充策略以及梦境共享策略&#xff0c;通过模拟人类梦境中的部分记忆…...

LlamaFactory可视化模型微调-Deepseek模型微调+CUDA Toolkit+cuDNN安装

LlamaFactory https://llamafactory.readthedocs.io/zh-cn/latest/ 安装 必须保证版本匹配&#xff0c;否则到训练时&#xff0c;找不到gpu cuda。 否则需要重装。下面图片仅供参考。因为cuda12.8装了没法用&#xff0c;重新搞12.6 cudacudnnpytorch12.69.612.6最新&#xf…...

算法12-贪心算法

一、贪心算法概念 贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取当前状态下最优的选择&#xff0c;从而希望导致全局最优解的算法。贪心算法的核心思想是“局部最优&#xff0c;全局最优”&#xff0c;即通过一系列局部最优选择&#xff0c;最…...

js实现点击音频实现播放功能

目录 1. HTML 部分&#xff1a;音频播放控件 2. CSS 部分&#xff1a;样式设置 3. JavaScript 部分&#xff1a;音频控制 播放和暂停音频&#xff1a; 倒计时更新&#xff1a; 播放结束后自动暂停&#xff1a; 4. 总结&#xff1a; 完整代码&#xff1a; 今天通过 HTML…...

matlab平面波展开法计算的二维声子晶体带隙

平面波展开法计算的二维声子晶体带隙&#xff0c;分别是正方与圆形散射体形成正方格子声子晶体&#xff0c;最后输出了能带图的数据&#xff0c;需要自己用画图软件画出来。 列表 平面波展开法计算二维声子晶体带隙/a2.m , 15823 平面波展开法计算二维声子晶体带隙/a4.m , 942…...

Spring Boot (maven)分页3.0版本 通用版

前言&#xff1a; 通过实践而发现真理&#xff0c;又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识&#xff0c;又从理性认识而能动地指导革命实践&#xff0c;改造主观世界和客观世界。实践、认识、再实践、再认识&#xff0c;这种形式&#xff0c;循环往…...

解决DeepSeek服务器繁忙问题

目录 解决DeepSeek服务器繁忙问题 一、用户端即时优化方案 二、高级技术方案 三、替代方案与平替工具&#xff08;最推荐简单好用&#xff09; 四、系统层建议与官方动态 用加速器本地部署DeepSeek 使用加速器本地部署DeepSeek的完整指南 一、核心原理与工具选择 二、…...

小项目第一天

总体实现流程图 智能称重模块流程图 定位追踪模块流程图 防盗报警模块流程图 密码解锁模块流程图 跨平台通信流程图...

家里WiFi信号穿墙后信号太差怎么处理?

一、首先在调制解调器&#xff08;俗称&#xff1a;猫&#xff09;测试网速&#xff0c;网速达不到联系运营商&#xff1b; 二、网线影响不大&#xff0c;5类网线跑500M完全没问题&#xff1b; 三、可以在卧室增加辅助路由器&#xff08;例如小米AX系列&#xff09;90~200元区…...

教育小程序+AI出题:如何通过自然语言处理技术提升题目质量

随着教育科技的飞速发展&#xff0c;教育小程序已经成为学生与教师之间互动的重要平台之一。与此同时&#xff0c;人工智能&#xff08;AI&#xff09;和自然语言处理&#xff08;NLP&#xff09;技术的应用正在不断推动教育内容的智能化。特别是在AI出题系统中&#xff0c;如何…...

SpringMVC新版本踩坑[已解决]

问题&#xff1a; 在使用最新版本springMVC做项目部署时&#xff0c;浏览器反复500&#xff0c;如下图&#xff1a; 异常描述&#xff1a; 类型异常报告 消息Request processing failed: java.lang.IllegalArgumentException: Name for argument of type [int] not specifie…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...