网站开发模式分为,网站如何维护,百家号关键词排名,什邡门户网站第一章#xff1a;基础入门#xff08;1 - 2 周#xff09;
1. 了解 Vue 3 概述
阅读官方文档简介 访问 Vue 3 官方文档#xff0c;在首页或简介板块中#xff0c;重点了解 Vue 3 相较于 Vue 2 的重大变革。比如#xff0c;Vue 3 采用了 Proxy 实现响应式系统#xff…第一章基础入门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 的命令提示符或 PowerShellMac 的终端。在命令行中输入 node -v 和 npm -v 来验证安装是否成功。如果成功安装会显示相应的版本号。 使用 Vite 创建 Vue 3 项目 在命令行中执行以下命令来创建一个基于 Vite 的 Vue 3 项目
npm create vitelatest 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 为你自己定义的变量。例如
templatedivp{{ greeting }}/p/div
/templatescript setup
import { ref } from vue;
const greeting ref(Hello, Vue 3!);
/script保存代码后在浏览器中可以看到界面上显示出 Hello, Vue 3!。尝试修改 greeting 的值观察界面的更新情况。 - 常用指令 - v-bind缩写为 :用于动态绑定 HTML 属性。例如给一个 img 标签绑定 src 属性
templatedivimg :srcimageUrl altVue Logo/div
/templatescript setup
import { ref } from vue;
const imageUrl ref(https://vuejs.org/images/logo.png);
/script- **v-on缩写为 **用于绑定事件。给一个按钮绑定点击事件templatedivbutton clickhandleClickClick me/button/div
/templatescript setup
const handleClick () {alert(Button clicked!);
};
/script- **v-if**用于条件渲染。根据条件显示或隐藏元素templatedivp v-ifisVisibleThis text is visible./p/div
/templatescript setup
import { ref } from vue;
const isVisible ref(true);
/script- **v-for**用于列表渲染。遍历数组并显示每个元素templatedivulli v-foritem in items :keyitem.id{{ item.name }}/li/ul/div
/templatescript 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 变量并在模板中使用
templatedivp{{ count }}/pbutton clickincrementIncrement/button/div
/templatescript setup
import { ref } from vue;
const count ref(0);
const increment () {count.value;
};
/script注意访问 ref 变量的值需要使用 .value。 - reactive - 创建一个响应式对象
templatedivp{{ user.name }}/pp{{ user.age }}/pbutton clickincreaseAgeIncrease Age/button/div
/templatescript setup
import { reactive } from vue;
const user reactive({name: John,age: 30
});
const increaseAge () {user.age;
};
/script与 ref 不同访问 reactive 对象的属性不需要使用 .value。
在第一阶段要通过不断地编写代码和修改示例来加深对这些基础概念的理解。每学习一个新的知识点都可以尝试自己编写一些简单的示例来验证和巩固所学内容。
