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 模板标签 <template>

Vue3 模板标签 <template> Vue3 选项式 API 在 Vue3 中，<template> 标签是一个非常核心的概念。 <template> 用于定义组件的模板结构，是 Vue 渲染页面的基础。 <template> 标签的基本概念 <template> 标签是 Vue3 中..

TUTORIALFrontendFetched/Vue 3

Vue3 Vue.version 属性

Vue3 Vue.version 属性 Vue3 全局 API Vue.version 是 Vue.js 3 提供的一个全局属性，它返回当前 Vue.js 的版本号。这个版本号是一个字符串，格式通常为 "x.y.z"，其中 x 表示主版本号，y 表示次版本号，z 表示修订版本号。如何使用 Vue.version？使用 Vue.version 非常简单。你只需要在 Vue.js 项目中访问 ..

TUTORIALFrontendFetched/Vue 3

Vue3 watch 属性 Vue3 选项式 API 在 Vue3 中，watch 属性用于监听 Vue 实例中某个数据的变化，并在数据变化时执行相应的回调函数。 watch 允许我们观察和响应 Vue 实例中特定数据的变化，从而执行一些副作用操作，比如更新 DOM、发起网络请求等。 2. watch 属性的基本用法在 Vue3 中，watch 属性可以通过以下方式使用：实例 [mycode4 type='..

TUTORIALFrontendFetched/Vue 3

拆分组件

拆分组件组件化是 Vue 最核心的设计思想。本章你将学会如何把页面拆成可复用的小组件，并通过 props 和 emit 实现组件间通信。为什么要拆组件？随着功能增加，一个文件会变得越来越长，几百行代码塞在一个 .vue 文件里，难以维护。拆组件的目的：每个组件只做一件事，组合起来完成复杂功能。什么粒度合适？一个好的经验法则是：当一个代码块有自己的数据、自己的行为、可以在别处复用，它就应该成为一个独立组件。页面..

TUTORIALFrontendFetched/Vue 3

Composable — 封装可复用逻辑

Composable — 封装可复用逻辑本章你将学会 Vue3 的最佳实践——用组合式函数（Composable）封装可复用的逻辑，让代码更干净、更易维护。什么是 Composable？随着功能增多，组件里的 JS 逻辑会越来越长。首页和详情页都需要加载文章数据，代码被复制了两份。 Composable（组合式函数）就是把可复用的逻辑提取到独立的 JS 函数中，哪个组件需要就在哪里调用。它的本质就是一个返回响应式数..

TUTORIALFrontendFetched/Vue 3

打包上线 — 部署到 Vercel

打包上线 — 部署到 Vercel 本章你将学会如何把本地开发完成的博客项目打包，并免费部署到互联网上，获得一个公开的访问链接。构建生产包开发时运行 npm run dev，Vite 会在本地启动开发服务器，支持热更新。但部署时需要的是优化过的小体积文件——这就是生产构建。 $ npm run build 执行后，项目根目录下会生成一个 dist/ 文件夹： dist/ ├── index.html ..

TUTORIALFrontendFetched/Vue 3

生命周期与数据请求

生命周期与数据请求本章你将学会 Vue3 的生命周期钩子，并在合适的时机用 fetch 从 JSON 文件加载博客数据。什么是生命周期？每个 Vue 组件从创建到销毁，会经历一系列阶段，这些阶段称为「生命周期」。 Vue 在每个阶段提供对应的钩子函数，让你在特定的时间点执行代码。比如：你想在组件加载完成后去请求数据，就需要用到 onMounted 这个钩子。 Vue3 生命周期钩子总览钩子函数执行时机常用场..

TUTORIALFrontendFetched/Vue 3

Pinia — 全局状态管理

Pinia — 全局状态管理本章你将学会用 Pinia 管理跨组件、跨页面的共享数据，并实现「收藏文章」功能。为什么需要全局状态管理？到目前为止，数据在组件之间通过 props 和 emit 传递。这对于父子关系简单的场景够用，但遇到以下情况就变得吃力：收藏状态需要在首页和详情页之间同步用户登录状态需要所有页面共享购物车数据需要在导航栏、商品页、结算页之间传递 props 逐层传递的痛点：如果 A 组件的..

TUTORIALFrontendFetched/Vue 3

Vue3 博客项目

Vue3 博客项目本章带你从零开始，用 Vite 创建一个 Vue3 博客项目，并理解项目里每个文件的作用。环境准备在开始之前，需要确保电脑上已经安装了 Node.js。 Node.js 是 JavaScript 的运行时环境，它让我们可以在浏览器之外运行 JS 代码。 Vue3 的开发工具链（Vite、npm）都依赖 Node.js。检查 Node.js 是否已安装打开终端（Windows 用 CMD 或 Power..

TUTORIALFrontendFetched/Vue 3

模板语法渲染

模板语法渲染本章你将学会用 Vue 的模板语法把 JS 数据渲染成 HTML，让博客首页展示文章卡片列表。插值表达式 {{ }} 插值表达式是 Vue 中最基础的数据绑定方式。它把 JS 变量的值「插入」到 HTML 中，语法是双层花括号包裹变量名。实例 [mycode4 type='html'] const blogTitle = 'RUNOOB 前端笔记' const a..

TUTORIALFrontendFetched/Vue 3

路由跳转

路由跳转本章你将学会用 Vue Router 实现前后端分离的页面跳转，包括动态路由参数。为什么要用路由？传统的多页面网站，点击链接会向服务器请求新的 HTML 文件，页面整个刷新，有白屏闪烁。 Vue Router 实现的是前端路由：URL 变化时不向服务器发请求，而是由 JS 动态切换显示的组件。这样做的好处：无刷新切换页面，体验像原生 APP 一样流畅。 Vue Router 核心概念概念作用对应代码 ..

TUTORIALFrontendFetched/Vue 3

watch 与搜索功能

watch 与搜索功能本章你将学会用 watch 和 watchEffect 监听数据变化，并实现博客搜索框的实时过滤功能。什么场景需要 watch？大多数情况下，Vue 的响应式绑定已经足够：数据变了，模板自动更新。但有些场景需要你在数据变化时主动执行一段逻辑，比如：搜索框输入后，过滤文章列表用户切换分类时，更新页面标题数据变化后，存到 localStorage 表单字段变化时，做表单校验这时就需要 wa..

TUTORIALFrontendFetched/Vue 3

Vue3 项目打包

Vue3 项目打包当你准备将应用发布到生产环境时，就需要打包 Vue 项目。打包 Vue 项目使用以下命令： npm run build 执行以上命令，输出结果如下：执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。如果直接双击打开 index.htm..

TUTORIALFrontendFetched/Vue 3

Vue3 内置属性

Vue3 内置属性在 Vue.js 中，is、key 和 ref 是三个常用的内置属性，用法如下。属性核心作用用法/示例 ..

TUTORIALFrontendFetched/Vue 3

Vue3 内置组件

Vue3 内置组件在 Vue.js 中，有一些内置的全局组件和内置组件，它们提供了一些常用的功能和布局支持，可以帮助开发者快速构建应用界面。以下是一些常见的 Vue 内置组件和它们的作用： 1. component <component> 是一个抽象的组件，用于动态地渲染不同的组件或元素。通过绑定 is 属性可以实现动态组件的切换和渲染。 2. transition 和 transition-g..

TUTORIALFrontendFetched/Vue 3

Vue3 样式绑定

Vue3 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 v-bind 在处理 class 和 style 时，表达式除了可以使用字符串之外，还可以是对象或数组。 v-bind:class 可以简写为 :class。 class 属性绑定我们可以为 v-bind:class 设置一个对象，从而动态的切换 class: 实例 ..

TUTORIALFrontendFetched/Vue 3

Vue3 组件

Vue3 组件每个 Vue 组件都是一个独立的 Vue 实例，具有自己的模板、数据、方法和生命周期钩子，使得组件可以自包含地定义和管理自己的功能和样式。组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，可以帮助你将用户界面拆分成独立和可复用的部分。每个 Vue 组件都是一个独立的 Vue 实例，具有自己的模板、数据、方法和生命周期钩子，使得组件可以自包含地定义和管理自己..

TUTORIALFrontendFetched/Vue 3

Vue3 组合式 API

Vue3 组合式 API Vue3 组合式 API（Composition API）主要用于在大型组件中提高代码逻辑的可复用性。传统的组件随着业务复杂度越来越高，代码量会不断的加大，整个代码逻辑都不易阅读和理解。 Vue3 使用组合式 API 的地方为 setup。在 setup 中，我们可以按逻辑关注点对部分代码进行分组，然后提取逻辑片段并与其他组件共享代码。因此，组合式 API（Composition API）允许我们编写..

TUTORIALFrontendFetched/Vue 3

Vue3 创建项目

Vue3 创建项目在上一章节 Vue3 安装我们使用了 npm init 命令创建过一个项目，本章节我们主要介绍 npm create 命令创建项目以及使用 vue ui 命令打开图形化的安装界面。 Vue 开发推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展：其他的 IDE 支持如下： Sublime Text 通过 LSP-Volar 支持。vim / Neovim 通..

TUTORIALFrontendFetched/Vue 3

Vue3 自定义指令

Vue3 自定义指令除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：实例 [mycode3 type='html'] 页面载入时，input 元素自动获取焦点： const app = Vue.createApp({}) // 注册一个全局自定义指..

TUTORIALFrontendFetched/Vue 3

Vue3 声明式渲染

Vue3 声明式渲染声明式渲染（Declarative Rendering）是指通过数据驱动视图的更新，而不是直接操作 DOM。声明式渲染让开发者可以更专注于业务逻辑，而不需要关心如何更新视图和 DOM。 Vue3 的声明式渲染是一种基于模板的渲染方式，它允许开发者通过简洁的模板语法来描述页面的结构和数据绑定关系，而不需要直接操作 DOM。 Vue3 的声明式渲染通过使用模板、指令（如 v-if、v-for、v-bind 等）以及..

TUTORIALFrontendFetched/Vue 3

Vue3 指令

Vue3 指令 Vue 指令（Directives）是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。 Vue 指令是带有前缀 v- 的特殊 HTML 属性，它赋予 HTML 标签额外的功能。与传统的 JavaScript 方法相比，使用 Vue 创建响应式页面要容易得多，并且需要的代码更少。以下是几个常用的 Vue..

TUTORIALFrontendFetched/Vue 3

Vue3 目录结构

Vue3 目录结构上一章节中我们使用了 npm 安装项目(Vue-cli 和 Vite)，我们在 IDE（Vscode、Atom 等）中打开该目录，结构如下所示：命令行工具 vue-cli（runoob-vue3-test）： Vite（runoob-vue3-test2）一个标准的 Vue 3 项目，通常可以拆成三层：项目根目录：构建工具与工程配置 public 目录：不参与构建的静态资源 s..

TUTORIALFrontendFetched/Vue 3

Vue3 事件处理

Vue3 事件处理我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。 v-on 指令可以缩写为 @ 符号。语法格式： v-on:click='methodName' 或 @click='methodName' v-on [mycode3 type='html'] 增加 1 这个按钮被点击了 {{ counter }}..