Learning Path
浏览 Vue 3 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
119
核心业务开发 接下来我们将在 App.vue 中构建核心任务管理逻辑。 整个逻辑如下： 数据流向：输入框输入内容 -> v-model 更新 newTaskTitle。 动作触发：按回车 -> 执行 addTask -> tasks 数组增加一项。 视图更新：tasks 改变 -> 触发 filteredTasks 自动重新计算 -> Vu..
Vue3 任务管理系统 接下来我们通过创建一个 Vue3 任务管理系统来巩固之前学习到的知识点。 核心功能：任务看板、分类筛选、数据持久化、深色模式切换、响应式设计。 技术栈：Vue 3 (Script Setup) + Vite + Pinia + Vue Router + Element Plus + Tailwind CSS。 教程内容 任务管理系统包含的知识点： ..
Vue3 模板语法 Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 实例 [mycode4 type='js'] {{ message }} ..
Vue3 教程 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单，本教程基于 Vue3 以上版本测试。 渐进式框架 渐进式框架是指那些允许开发者根据项目需求逐步引入和使用其功能的框架，而不需要一次性全部使用框架的特性。 常..
Vue3 v-bind 指令 Vue3 内置指令 v-bind 指令用于动态绑定属性或组件 prop，使属性值可以响应数据变化。 基本说明 v-bind 指令用于动态地将一个或多个属性绑定到表达式。它允许属性的值是动态的，而不是固定的字符串。 简写: : 或 .（prop 修饰符时） 期望类型: any (带参数) | Object (不带参数) 作用: 动态绑定属性或 prop。 基本用法 实例 [mycode4 ty..
Vue3 v-cloak 指令 Vue3 内置指令 v-cloak 指令用于隐藏未编译的模板，直到组件实例准备完成。 基本说明 v-cloak 指令用于解决使用 DOM 模板时的'未编译模板闪烁'问题。当用户访问页面时，可能会看到原始的 {{ }} mustache 标签，直到 Vue 组件挂载并渲染内容。 v-cloak 会保留在元素上，直到关联的组件实例挂载完成。结合 CSS 规则，可以在此期间隐藏原始模板..
Vue3 v-else-if 指令 Vue3 内置指令 v-else-if 指令用于表示 v-if 的 else if 块，可以链式使用形成多条件判断。 基本说明 v-else-if 指令必须紧跟在 v-if 或另一个 v-else-if 元素后面，表示前一个条件不满足时的另一个条件判断。 期望类型: any 作用: 表示 v-if 的 else if 块，前面必须有 v-if 或 v-else-if。可以链式使用。 基本用..
Vue3 v-else 指令 Vue3 内置指令 v-else 指令用于表示 v-if 或 v-else-if 的 else 块。 基本说明 v-else 指令必须紧跟在 v-if 或 v-else-if 元素之后，表示当所有前面的条件都不满足时渲染的内容。 期望类型: 无（不接受表达式） 作用: 表示 v-if 的 else 块，前面必须有 v-if 或 v-else-if。 基本用法 实例 [mycode4 type..
Vue3 v-for 指令 Vue3 内置指令 v-for 指令用于基于源数据多次渲染元素，是 Vue 中实现列表渲染的核心指令。 基本说明 v-for 指令基于一个数组或对象重复渲染元素。它允许你重复渲染一组相似的元素，并可以使用来自数据源的值。 期望类型: Array | Object | number | string | Iterable 作用: 列表渲染，基于源数据多次渲染元素。 基本语法 实例 [mycode..
Vue.js 循环语句 在 Vue 中，循环语句主要通过 v-for 指令来实现，用于遍历数组或对象，生成对应数量的元素。 在元素上使用 v-for 指令，根据源数据的数组或对象进行循环渲染元素。 遍历数组：v-for='(item, index) in items' 遍历对象：v-for='(value, key, index) in object'key 的作用: 使用 v-for 渲染列表时..
Vue3 v-html 指令 Vue3 内置指令 v-html 指令用于更新元素的 innerHTML，将内容作为原始 HTML 渲染。 基本说明 v-html 指令会将其绑定表达式的值作为 HTML 插入到元素中。这在需要渲染富文本内容时非常有用。 期望类型: string 作用: 更新元素的 innerHTML，会渲染原始 HTML。 使用场景 1、渲染富文本内容 当从服务器获取 HTML 内容并需要渲染时： 实例 ..
Vue3 v-if 指令 Vue3 内置指令 v-if 指令用于条件渲染，根据表达式的真假值决定是否渲染元素或模板片段。 基本说明 v-if 指令会根据绑定表达式的真假值有条件地渲染元素。当条件为真时，元素会被渲染到 DOM 中；当条件为假时，元素不会被渲染。 期望类型: any 作用: 条件渲染，根据表达式的真假值决定是否渲染元素。条件为假时不渲染 DOM。 基本用法 实例 [mycode4 type='ht..
Vue3 条件语句 在 Vue 3 中，你可以在模板中使用多种条件语句来控制组件的渲染。主要的条件语句有 v-if、v-else-if、v-else 和 v-show，以下是它们的用法及区别： v-if：元素在条件为 false 时不会被渲染到 DOM 中，适用于条件变化不频繁的情况。v-show：元素总是渲染到 DOM 中，适用于条件变化频繁的情况，切换显示隐藏性能更好。v-else-if 和 v-else：用于处理多个条件分支，配..
Vue3 v-memo 指令 Vue3 内置指令 v-memo 指令用于记忆化（memoize）模板的子树，通过指定依赖值数组来决定是否跳过更新。 仅在 Vue 3.2+ 版本可用。 基本说明 v-memo 指令允许你记忆化模板的一部分。它期望一个固定长度的依赖值数组。如果数组中的每个值与上次渲染时相同，则整个子树的更新将被跳过。 期望类型: any[] 作用: 记忆化模板子树，通过指定依赖值数组来决定是否跳过更新。 基..
Vue3 v-model 指令 Vue3 内置指令 v-model 指令用于在表单输入元素和组件上创建双向数据绑定。 基本说明 v-model 指令会在表单元素和组件上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 期望类型: 根据表单元素类型变化 作用: 在表单输入元素和组件上创建双向数据绑定。 基本用法 1、文本输入 实例 [mycode4 type='html'] ..
Vue3 v-on 指令 Vue3 内置指令 v-on 指令用于绑定事件监听器，可以监听 DOM 事件或自定义事件。 基本说明 v-on 指令用于为元素绑定事件处理函数。可以用它来监听原生 DOM 事件，也可以监听自定义组件发出的事件。 简写: @ 期望类型: Function | Inline Statement | Object 作用: 绑定事件监听器，支持原生 DOM 事件和自定义事件。 基本用法 实例 [myco..
Vue3 v-once 指令 Vue3 内置指令 v-once 指令用于使元素和组件只渲染一次，后续更新会被跳过。 基本说明 v-once 指令用于将元素和组件标记为只渲染一次。在后续的重新渲染中，元素及其所有子元素会被视为静态内容跳过。这可以用于优化更新性能。 期望类型: 无（不接受表达式） 作用: 只渲染元素和组件一次，后续更新视为静态内容跳过。 使用场景 1、静态内容优化 当某些内容不需要更新时，使用 v-once 可..
Vue3 v-pre 指令 Vue3 内置指令 v-pre 指令用于跳过编译，不对元素及其子元素进行 Vue 模板解析。 基本说明 v-pre 指令用于告诉 Vue 跳过这个元素及其所有子元素的编译。带有 v-pre 的元素会作为原始 HTML 渲染，不进行 Vue 模板语法处理。 期望类型: 无（不接受表达式） 作用: 跳过编译，不对元素及其子元素进行 Vue 模板解析。 使用场景 1、显示原始 Mustache 标签 v..
Vue3 v-show 指令 Vue3 内置指令 v-show 指令用于根据表达式的真假值切换元素的可见性。它通过 CSS 的 display 属性来控制元素的显示与隐藏。 基本说明 v-show 指令根据绑定表达式的真假值来决定元素是否显示。无论条件为真还是为假，元素都会渲染到 DOM 中，只是通过 CSS 控制其可见性。 期望类型: any 作用: 根据表达式的真假值切换元素的可见性，通过 CSS display 属性控制。..
Vue3 v-slot 指令 Vue3 内置指令 v-slot 指令用于表示具名插槽或作用域插槽，用于组件之间的内容分发。 基本说明 v-slot 指令用于为插槽提供内容或接收插槽传递的 props。它是 Vue 中实现组件内容分发的核心方式。 简写: # 期望类型: JavaScript 表达式（可选，仅在接收 props 时需要） 作用: 表示具名插槽或作用域插槽。 基本用法 1、具名插槽 实例 [mycode4 t..
Vue3 v-text 指令 Vue3 内置指令 v-text 指令用于更新元素的文本内容，相当于设置 DOM 元素的 textContent 属性。 基本说明 v-text 指令会将其绑定表达式的值设置为元素的文本内容。它是 Vue 模板中最常用的文本插值 {{ }} 的另一种写法。 期望类型: string 作用: 更新元素的文本内容，相当于设置 textContent 属性。 基本用法 实例 [mycode4 ty..
使用 VSCode 开发 Vue Visual Studio Code（简称 VS Code）是一个由微软开发的免费、开源的代码编辑器，支持多种编程语言，并提供了代码高亮、智能代码补全、代码重构、调试等功能。 Visual Studio Code 内置支持 Vue.js 的核心构建块：HTML、CSS 和 JavaScript。 VS Code 内置终端，可以直接在编辑器中运行命令行工具，如 npm、yarn 等，方便项目构建和管理。 ..
Vue3 监听属性 本章节，我们将为大家介绍 Vue3 监听属性 watch，我们可以通过 watch 来响应数据的变化。 watch 的作用是用于监测响应式属性的变化，并在属性发生改变时执行特定的操作，它是 Vue 中的一种响应式机制，允许你在数据发生变化时做出相应的响应，执行自定义的逻辑。 watch 使得在响应式属性变化时能够有更多的控制权和灵活性，让你的组件能够更好地响应数据的变化并执行相应的逻辑。 以下实例通过使用 wat..