Web前端

本文针对 Vue 项目中组件样式全局生效导致的冲突问题，介绍 Scoped CSS 解决方案。通过为 `<style>` 添加 `scoped` 属性，Vue 自动为组件元素添加唯一 `data-v-xxx` 属性，使 CSS 选择器限定在当前组件内，实现样式隔离。文中给出父组件、全局组件、局部组件的修改示例，并总结特性：父组件 scoped 样式不渗透子组件内部，但子组件根元素受双方影响；若需影响子组件内部，可使用 `::v-deep`、`/deep/` 或 `:deep()` 深度选择器，或改用 CSS Modules。同时提醒避免过度使用 scoped、注意少量运行时开销、覆盖第三方库样式时需用深度选择器、scoped 优先级遵循 CSS 规则。最终三个组件样式相互隔离，边框、背景及布局均按预期显示。

案例概述 本案例演示了 Vue 3 中组件的两种注册方式：全局注册和局部注册，以及如何在父组件中引用这些组件。 组件结构 src/components/2026516/ ├── 2.vue # 父组件（主组件） ├── GlobalComponent.vue # 全局组件

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

Main根文件 import { createApp } from 'vue' //创建应用 import App from './App.vue' //引入app组件，根组件 createApp(App).mount('#app') //createApp创建应用，将app组件挂载到index.

使用Vite创建项目 https://cn.vuejs.org/guide/quick-start.html 创建命令 npm create vue@latest 常见问题 首次打开项目会有报错，是因为项目中没有依赖 npm i //安装所有依赖

下拉菜单 <template> <div> <select v-model="xz"> <option value="">请选择</option> <option v-for="flurt in list" :key="flur

toRefs( )函数用法，实现个人信息（姓名、年龄、性别）在4秒后改变。 <template> <div class="info"> <h2>个人信息</h2> <p>姓名：{{ name }}</p>

项目目录 以下是默认的项目的目录树以及每个文件都是干什么的解释。 VUE/ ├── test/ # 项目根文件夹（你的 Vue 项目） │ ├── .vscode/ # VSCode 编辑器配置文件（自动生成） │ ├── nod

前置条件 Vue课上环境安装-vscode|nodejs|npm|yarn - 犯困乐的博客 创建项目 使用命令yarn create vite test --template vue 创建一个项目名为test项目模板为vue的项目 命令模板是yarn create vite <项目名称> --te

安装Visual Studio Code 以下是Visual Studio Code的官网：