Web前端

本文介绍一个纯 HTML+CSS+SVG 实现的动画 404 报错页面，无需 JavaScript。页面包含眨眼、眼球移动、口鼻入场等趣味动画效果，并提供完整的响应式代码，可自动适配移动端。读者直接复制源码即可部署到自己的网站，为站点增加一个轻松的小彩蛋。代码结构简洁，主要利用 SVG 图形与 CSS 关键帧动画实现，包含 404 大号提示、返回首页链接等核心元素，兼顾视觉趣味与实用性。

Vue 默认组件样式全局生效，容易造成样式冲突。文章介绍 scoped CSS：为 style 添加 scoped 后，Vue 会给元素加唯一 data-v-xxx 属性并适配选择器，样式仅作用于当前组件及子组件根元素。父组件 scoped 不会渗透子组件内部；子组件根元素同时受父子 scoped 影响，内部元素仅受自身 scoped 影响。需影响子组件时可用 ::v-deep、/deep/、:deep()，也可用 CSS Modules。注意全局样式不应 scoped，避免过度使用，scoped 有少量运行时开销，第三方库样式可能需深度选择器。由此实现组件样式隔离，避免冲突。

该文演示 Vue 3 中组件的两种注册方式：全局注册通过 `app.component()` 在应用启动时完成，适用于按钮、输入框等通用组件，可在任何模板中使用；局部注册通过 `import` 导入，在 `script setup` 下自动注册，仅限当前组件使用，代码更清晰、避免命名冲突。父组件在模板中以标签形式引用子组件，标签名可使用短横线或帕斯卡命名，且需与注册名对应。示例包含全局组件（实线边框）与局部组件（虚线边框），在父组件中并排显示。关键要点包括：按使用场景选择注册方式，`script setup` 自动注册已导入组件，父组件引用子组件形成父子关系，同时应避免组件自引用或循环引用以防死循环。

本文介绍了一个基于 Vue 3 和 Bootstrap 5 开发“学习计划表”应用的完整案例。项目通过 VSCode 搭建，引入 Bootstrap CDN 样式，并实现以下核心功能：使用 `v-for` 动态渲染表格数据，展示序号、科目、内容、地点、完成状态和操作列；通过 `v-model` 绑定完成状态开关，并用动态 `id` 与 `label` 关联解决点击文字无法切换状态的问题；删除功能限定只有“已完成”的计划才能删除，否则弹出提示；新增计划通过表单提交实现，包含必填校验、`v-model.trim` 去除首尾空格，以及下拉框动态选项。案例覆盖 Vue 常用指令和事件绑定、修饰符等关键知识点，适合练习组件内数据管理、条件渲染和表单交互，最终提供可直接复用的完整代码。

本文介绍了Vue应用的两个核心文件。Main根文件通过`createApp(App).mount('#app')`创建应用，并将根组件App挂载到index.html中id为app的容器内。App.vue是根组件，文件结构由三部分组成：`<template>`用于编写HTML，`<script lang="ts">`用于编写JavaScript或TypeScript，`<style>`用于编写CSS。这清晰展示了Vue单文件组件的基本组织方式及应用启动流程。

使用Vite创建Vue项目时，可参考官方快速上手文档，执行`npm create vue@latest`命令生成项目。常见问题：首次打开项目会报错，原因是项目尚未安装依赖，需运行`npm i`安装所有依赖后即可正常使用。

该文章展示了Vue 3组合式API中三个常见的界面渲染示例：下拉菜单、列表渲染和表格渲染。下拉菜单通过`v-model`绑定`select`选项，并利用`v-for`遍历数组生成选项，实现选择反馈。列表渲染使用`v-for`遍历对象数组，显示每条数据的id、名称与描述，支持重复数据。表格渲染结合`v-for`与`<table>`标签，将学生数组数据动态渲染为表格行，并设置了表头、边框及样式。所有示例均采用`ref`定义响应式数据，模板中通过插值表达式显示内容，代码简洁，便于初学者快速掌握Vue基础指令和列表循环的实际用法。

该文介绍 Vue 3 中 `toRefs()` 函数的实际用法。示例中先通过 `reactive` 创建包含姓名、年龄、性别的响应式对象 `person`，再用 `toRefs` 将其解构为多个 ref 值，使模板可直接使用且保持响应式。随后设置 4 秒定时器，修改 `name.value`、`age.value`、`gender.value` 为李四、25、女，页面数据随之更新，控制台输出提示。读者可借此理解：`toRefs` 能将响应式对象转换为普通 ref 对象，解构后不丢失响应性，适用于在 `script setup` 中便捷操作响应式数据，并实现延时更新视图的效果。

本文介绍 Vue 项目默认目录结构及核心文件作用，帮助初学者快速上手。项目根目录包含 public（不编译的静态资源）、src（开发主目录，含 assets、components、App.vue、main.js 等）、配置文件 vite.config.js、package.json、index.html 等。重点说明 main.js 负责创建并挂载 Vue 实例，App.vue 是根组件，包含脚本与模板区。读者可据此理解各文件职责，明确开发时主要操作 src 目录，并了解静态资源编译与忽略规则，从而减少配置困惑。

使用 `yarn create vite 项目名 --template vue` 可快速创建 Vue 项目，例如 `yarn create vite test --template vue`。创建过程中选择 yes 可在完成后自动启动，若下载慢可切换国内数据源。创建成功后，控制台会输出项目地址，点击即可查看默认效果。手动启动项目时，需先进入项目目录（如 `cd .\test\`），再执行 `yarn dev`，控制台会输出访问地址（如 http://localhost:5173/），浏览器打开即可看到项目效果。文章还提示需提前完成 Vue 课环境安装，包括 VSCode、Node.js、npm 和 yarn。