Learning Path

Vue 3 tutorials

Browse tutorials and chapters for Vue 3.

Frontend

HTML, CSS, JavaScript, browser APIs, frontend frameworks, and UI engineering.

Tutorials

119

TUTORIALFrontendFetched/Vue 3

Vue3 表单

Vue3 表单这节我们为大家介绍 Vue 表单上的应用。我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的..

TUTORIALFrontendFetched/Vue 3

Vue3 全局 API

Vue3 全局 API Vue3 全局 API 如下：序号 API & 描述实例 1 createApp() 创建 Vue 应用实例，通常用于客户端渲染。 const app = createAp..

TUTORIALFrontendFetched/Vue 3

Vue3 安装

Vue3 安装 1、独立版本我们可以在 Vue.js 的官网上直接下载最新版本, 并用 <script> 标签引入。下载 Vue.js 2、使用 CDN 方法以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。 cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js Sta..

TUTORIALFrontendFetched/Vue 3

Vue3 起步Vue.js 是一个渐进式 JavaScript 框架，主要用于构建用户界面。刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。 Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下： const app = Vue.createApp({ /* 根组件选项 */ }) 传递给 createAp..

TUTORIALFrontendFetched/Vue 3

Vue3 简介

Vue3 简介 Vue3 是一个用于构建用户界面的渐进式框架。渐进式意味着你可以根据项目需要，只引入 Vue 的一部分能力：从一个简单的页面交互增强，到构建完整的单页应用（SPA），乃至服务端渲染（SSR）应用，Vue3 都能胜任。 Vue3 是由尤雨溪（Evan You）主导开发的渐进式 JavaScript 前端框架，于 2020 年 9 月 18 日正式发布，代号 One Piece（海贼王）。相比 Vue2，Vue3 对核..

TUTORIALFrontendFetched/Vue 3

Vue3 is 属性

Vue3 is 属性 Vue3 内置属性 is 属性是 Vue 中实现动态组件的核心属性，用于动态地指定当前元素应该渲染为哪个组件。基本说明 is 属性主要用于动态组件场景，允许在运行时根据数据动态切换不同的组件进行渲染。这是 Vue 中实现动态组件功能的主要方式。类型: String | Component 作用: 动态切换组件，实现组件的复用与动态渲染。基本用法 1、动态切换组件使用 <compon..

TUTORIALFrontendFetched/Vue 3

Vue3 key 属性

Vue3 key 属性 Vue3 内置属性 key 属性是 Vue 虚拟 DOM 算法的关键特殊属性，主要用于帮助 Vue 识别每个节点的唯一性，从而高效地更新虚拟 DOM。基本说明 key 属性用于为 Vue 组件或元素提供唯一标识。在列表渲染中，每个 v-for 循环的元素都应该有唯一的 key 属性。类型: String | Number 作用: 在列表渲染中为每个元素提供唯一标识，帮助 Vue 高效地 diff 和复用..

TUTORIALFrontendFetched/Vue 3

Vue3 混入

Vue3 混入混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。来看一个简单的实例：实例 [mycode3 type='js'] // 定义混入对象 const myMixin = { created() { this.hello() }, methods: { hell..

TUTORIALFrontendFetched/Vue 3

Vue3 选项式 API

Vue3 选项式 API 以下 API 广泛用于 Vue 的选项式 API 中，用于管理状态、生命周期、插槽、依赖注入等功能。 1. 状态选项序号 API & 描述实例 1 data 组件的数据选项，用于定义组件的状态。 data() { return { count: 0 }; } ..

TUTORIALFrontendFetched/Vue 3

Pinia 入门教程

Pinia 入门教程在 Vue3 中，状态管理是一个绕不开的话题。 Pinia 是 Vue.js 的轻量级状态管理库，它让你能够在组件之间共享和管理状态，我们可以把 Pinia 想象成一个全局的数据仓库，所有组件都可以从这里获取数据或者更新数据。本章节我们要介绍的是 Vue3 官方推荐的状态管理库 —— Pinia，相比 Vuex，Pinia 提供了更简洁、更符合 Vue3 组合式 API 思维的状态管理方案。下图对比了两者的..

TUTORIALFrontendFetched/Vue 3

Vue3 项目说明

Vue3 项目说明 Vue 3 项目由多个文件和文件夹组成，每个部分都有其特定的作用。以下是对 Vue 3 项目代码的基本解析，帮助你理解项目的结构和各个部分的功能。 Vue 3 项目由多个文件和文件夹组成，核心文件包括 index.html、main.js 和 App.vue。Vue 组件是应用的基本构建块，使用单文件组件（.vue 文件）定义。Vue Router 用于管理路由，Vuex 用于状态管理。项目结构一个 Vu..

TUTORIALFrontendFetched/Vue 3

Vue3 内置指令

Vue3 内置指令 Vue.js 内置了多个指令（Directives），用于在模板中添加特定的响应式行为或操作 DOM。以下是 Vue.js 中常用的内置指令：指令用法示例说明 v-text <p v-text..

TUTORIALFrontendFetched/Vue 3

Vue3 生命周期钩子

Vue3 生命周期钩子 Vue.js 中的生命周期钩子函数是指在组件实例的创建、更新、销毁等过程中，Vue 自动调用的一系列方法。在这些步骤中，组件会触发一系列称为'生命周期钩子'的函数，允许开发者在特定时机执行自定义代码。生命周期钩子的注册与使用 mounted 钩子：此钩子在组件完成初始渲染并生成 DOM 节点后触发。例如： export default { mounted() { consol..

TUTORIALFrontendFetched/Vue 3

Vue3 ref 属性

Vue3 ref 属性 Vue3 内置属性 ref 属性用于给元素或子组件注册引用信息，以便在 JavaScript 代码中直接访问 DOM 元素或组件实例。基本说明 ref 是 Vue 中获取 DOM 元素或组件实例的重要方式。它允许我们在 Vue 实例挂载后直接操作 DOM 或调用子组件的方法。类型: String | Function 作用: 访问 DOM 元素或子组件实例，进行焦点控制、方法调用等操作。基本用法 ..

TUTORIALFrontendFetched/Vue 3

Vue3 路由(Vue Router)

Vue3 路由(Vue Router) 本章节我们将为大家介绍 Vue 路由。 Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。 Vue.js 路由需要载入 vue-router 库中文文档地址：vue-router 文档。 Vue Router 负责将 URL 路径与应用中的组件进行映射，当用户在应用中..

TUTORIALFrontendFetched/Vue 3

Vue3 创建单文件组件(SFC)

Vue3 创建单文件组件(SFC) Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。在 Vue3 中，你可以使用 .vue 文件来创建单文件组件(Single File Components, SFCs)，这个文件包含了组件的模板、JavaScript 代码以及 CSS 样式。现在..

TUTORIALFrontendFetched/Vue 3

Vue3 基础语法

Vue3 基础语法 Vue.js 是一个渐进式 JavaScript 框架，主要用于构建用户界面。 Vue.js 基于组件化和响应式数据的理念，提供了一种简单高效的方式来构建用户界面。 Vue 单文件组件 Vue 单文件组件（Single File Component，简称 SFC）是 Vue.js 框架的文件格式，它允许开发者将 HTML、JavaScript 和 CSS 代码放在一个文件中，通常以 .vue 为文件后缀。单文件组..

TUTORIALFrontendFetched/Vue 3

Vue3 Tailwind CSS

Vue3 Tailwind CSS 在 Vue 项目中使用 Tailwind CSS 是一个很流行的选择，因为它提供了一种实用工具优先的方法来编写 CSS，使得你可以直接在类名中应用样式，这种方法使得样式编写更加简洁和直观。 Tailwind CSS 教程：https://www.runoob.com/tailwindcss/tailwindcss-tutorial.html Tailwind CSS 官网：https://tailw..

TUTORIALFrontendFetched/Vue 3

环境搭建

环境搭建我们将使用 Vite 快速构建项目 TaskHub，Vite 内容参考：Vite 教程。 1. 创建项目打开终端，执行以下命令创建 Vite + Vue3 项目（选择 Script Setup 语法）： # npm 命令 npm create vite@latest task-hub -- --template vue # yarn 命令 yarn create vite task-hub --template vue..

TUTORIALFrontendFetched/Vue 3

逻辑复用与性能优化

逻辑复用与性能优化在完成路由与登录逻辑后，随着项目规模扩大，我们会发现有些逻辑（如存取本地数据、弹出通知）在多个页面反复出现。同时，如果任务列表达到上千条，页面可能会出现卡顿。这一阶段，我们将通过 Composition API 的深度应用来解决代码复用和性能瓶颈问题。逻辑复用：自定义 Composables (Hooks) Composables 是 Vue 3 的精髓，它允许我们将逻辑（State + Actions）抽离成..

TUTORIALFrontendFetched/Vue 3

项目部署

项目部署经过前几个章节的打磨，我们创建的 TaskHub 项目功能已经非常完善了，现在我们要跨出最后一步：将它从本地开发环境推向生产服务器。在企业级落地中，我们需要确保代码在不同环境（测试、生产）能自动切换配置，并且加载速度极快。环境变量管理：一套代码，多处运行在真实开发中，API 地址或一些配置在开发环境和线上环境是不一样的。 Vite 默认支持 .env 文件。在项目根目录下创建两个文件： .env.developmen..

TUTORIALFrontendFetched/Vue 3

路由系统

路由系统上一章节我们的任务管理逻辑已经通过 Pinia 实现了持久化，现在我们需要为应用注入灵魂——路由系统。在企业级开发中，路由不只是切换页面，更承担了安全性（权限控制）和用户体验（动态标题）的重任。安装与基础配置首先安装 Vue Router： npm install vue-router 在 src 目录下创建 router 目录，并创建 router/index.js 文件。我们将定义两个页面：工作台 (Dash..

TUTORIALFrontendFetched/Vue 3

组件拆分

组件拆分现在的 App.vue 功能已经完备，但所有代码都塞在一起了。下一步我们将进行组件拆分，你会学到：如何在 Tailwind v4 环境下编写高度复用的子组件。如何使用 defineProps 和 defineEmits 在 JS 组件间传递数据。现在在 src/components 目录下新建以下四个文件： TaskHeader.vue（纯展示） TaskInput.vue（输入逻辑..

TUTORIALFrontendFetched/Vue 3

状态管理与数据持久化

状态管理与数据持久化上一章节已经完成了组件化，我们现在面临最后一个实战痛点：页面刷新，数据全丢。为了解决这个问题，我们将引入 Vue 官方推荐的状态管理库 Pinia，并结合 Tailwind v4 的样式能力，实现数据的持久化存储。 Pinia 状态管理与数据持久化 Pinia 是 Vue.js 的轻量级状态管理库，它让你能够在组件之间共享和管理状态，我们可以把 Pinia 想象成一个全局的数据仓库，所有组件都可以从这里获取数据..