Learning Path
浏览 Vue 3 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
119
Vue3 表单 这节我们为大家介绍 Vue 表单上的应用。 我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的..
Vue3 全局 API Vue3 全局 API 如下： 序号 API & 描述 实例 1 createApp() 创建 Vue 应用实例，通常用于客户端渲染。 const app = createAp..
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..
Vue3 起步Vue.js 是一个渐进式 JavaScript 框架，主要用于构建用户界面。 刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。 Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下： const app = Vue.createApp({ /* 根组件选项 */ }) 传递给 createAp..
Vue3 简介 Vue3 是一个用于构建用户界面的渐进式框架。 渐进式意味着你可以根据项目需要，只引入 Vue 的一部分能力：从一个简单的页面交互增强，到构建完整的单页应用（SPA），乃至服务端渲染（SSR）应用，Vue3 都能胜任。 Vue3 是由尤雨溪（Evan You）主导开发的渐进式 JavaScript 前端框架，于 2020 年 9 月 18 日正式发布，代号 One Piece（海贼王）。 相比 Vue2，Vue3 对核..
Vue3 is 属性 Vue3 内置属性 is 属性是 Vue 中实现动态组件的核心属性，用于动态地指定当前元素应该渲染为哪个组件。 基本说明 is 属性主要用于动态组件场景，允许在运行时根据数据动态切换不同的组件进行渲染。这是 Vue 中实现动态组件功能的主要方式。 类型: String | Component 作用: 动态切换组件，实现组件的复用与动态渲染。 基本用法 1、动态切换组件 使用 <compon..
Vue3 key 属性 Vue3 内置属性 key 属性是 Vue 虚拟 DOM 算法的关键特殊属性，主要用于帮助 Vue 识别每个节点的唯一性，从而高效地更新虚拟 DOM。 基本说明 key 属性用于为 Vue 组件或元素提供唯一标识。在列表渲染中，每个 v-for 循环的元素都应该有唯一的 key 属性。 类型: String | Number 作用: 在列表渲染中为每个元素提供唯一标识，帮助 Vue 高效地 diff 和复用..
Vue3 混入 混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 来看一个简单的实例： 实例 [mycode3 type='js'] // 定义混入对象 const myMixin = { created() { this.hello() }, methods: { hell..
Vue3 选项式 API 以下 API 广泛用于 Vue 的选项式 API 中，用于管理状态、生命周期、插槽、依赖注入等功能。 1. 状态选项 序号 API & 描述 实例 1 data 组件的数据选项，用于定义组件的状态。 data() { return { count: 0 }; } ..
Pinia 入门教程 在 Vue3 中，状态管理是一个绕不开的话题。 Pinia 是 Vue.js 的轻量级状态管理库，它让你能够在组件之间共享和管理状态，我们可以把 Pinia 想象成一个全局的数据仓库，所有组件都可以从这里获取数据或者更新数据。 本章节我们要介绍的是 Vue3 官方推荐的状态管理库 —— Pinia，相比 Vuex，Pinia 提供了更简洁、更符合 Vue3 组合式 API 思维的状态管理方案。 下图对比了两者的..
Vue3 项目说明 Vue 3 项目由多个文件和文件夹组成，每个部分都有其特定的作用。 以下是对 Vue 3 项目代码的基本解析，帮助你理解项目的结构和各个部分的功能。 Vue 3 项目由多个文件和文件夹组成，核心文件包括 index.html、main.js 和 App.vue。Vue 组件是应用的基本构建块，使用单文件组件（.vue 文件）定义。Vue Router 用于管理路由，Vuex 用于状态管理。 项目结构 一个 Vu..
Vue3 内置指令 Vue.js 内置了多个指令（Directives），用于在模板中添加特定的响应式行为或操作 DOM。以下是 Vue.js 中常用的内置指令： 指令 用法示例 说明 v-text <p v-text..
Vue3 生命周期钩子 Vue.js 中的生命周期钩子函数是指在组件实例的创建、更新、销毁等过程中，Vue 自动调用的一系列方法。在这些步骤中，组件会触发一系列称为'生命周期钩子'的函数，允许开发者在特定时机执行自定义代码。 生命周期钩子的注册与使用 mounted 钩子：此钩子在组件完成初始渲染并生成 DOM 节点后触发。例如： export default { mounted() { consol..
Vue3 ref 属性 Vue3 内置属性 ref 属性用于给元素或子组件注册引用信息，以便在 JavaScript 代码中直接访问 DOM 元素或组件实例。 基本说明 ref 是 Vue 中获取 DOM 元素或组件实例的重要方式。它允许我们在 Vue 实例挂载后直接操作 DOM 或调用子组件的方法。 类型: String | Function 作用: 访问 DOM 元素或子组件实例，进行焦点控制、方法调用等操作。 基本用法 ..
Vue3 路由(Vue Router) 本章节我们将为大家介绍 Vue 路由。 Vue 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。 Vue.js 路由需要载入 vue-router 库 中文文档地址：vue-router 文档。 Vue Router 负责将 URL 路径与应用中的组件进行映射，当用户在应用中..
Vue3 创建单文件组件(SFC) Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。 在 Vue3 中，你可以使用 .vue 文件来创建单文件组件(Single File Components, SFCs)，这个文件包含了组件的模板、JavaScript 代码以及 CSS 样式。 现在..
Vue3 基础语法 Vue.js 是一个渐进式 JavaScript 框架，主要用于构建用户界面。 Vue.js 基于组件化和响应式数据的理念，提供了一种简单高效的方式来构建用户界面。 Vue 单文件组件 Vue 单文件组件（Single File Component，简称 SFC）是 Vue.js 框架的文件格式，它允许开发者将 HTML、JavaScript 和 CSS 代码放在一个文件中，通常以 .vue 为文件后缀。 单文件组..
Vue3 Tailwind CSS 在 Vue 项目中使用 Tailwind CSS 是一个很流行的选择，因为它提供了一种实用工具优先的方法来编写 CSS，使得你可以直接在类名中应用样式，这种方法使得样式编写更加简洁和直观。 Tailwind CSS 教程：https://www.runoob.com/tailwindcss/tailwindcss-tutorial.html Tailwind CSS 官网：https://tailw..
环境搭建 我们将使用 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..
逻辑复用与性能优化在完成路由与登录逻辑后，随着项目规模扩大，我们会发现有些逻辑（如存取本地数据、弹出通知）在多个页面反复出现。同时，如果任务列表达到上千条，页面可能会出现卡顿。 这一阶段，我们将通过 Composition API 的深度应用 来解决代码复用和性能瓶颈问题。 逻辑复用：自定义 Composables (Hooks) Composables 是 Vue 3 的精髓，它允许我们将逻辑（State + Actions）抽离成..
项目部署 经过前几个章节的打磨，我们创建的 TaskHub 项目功能已经非常完善了，现在我们要跨出最后一步：将它从本地开发环境推向生产服务器。 在企业级落地中，我们需要确保代码在不同环境（测试、生产）能自动切换配置，并且加载速度极快。 环境变量管理：一套代码，多处运行 在真实开发中，API 地址或一些配置在开发环境和线上环境是不一样的。 Vite 默认支持 .env 文件。 在项目根目录下创建两个文件： .env.developmen..
路由系统 上一章节我们的任务管理逻辑已经通过 Pinia 实现了持久化，现在我们需要为应用注入灵魂——路由系统。 在企业级开发中，路由不只是切换页面，更承担了安全性（权限控制）和用户体验（动态标题）的重任。 安装与基础配置 首先安装 Vue Router： npm install vue-router 在 src 目录下创建 router 目录，并创建 router/index.js 文件。 我们将定义两个页面：工作台 (Dash..
组件拆分 现在的 App.vue 功能已经完备，但所有代码都塞在一起了。 下一步我们将进行组件拆分，你会学到： 如何在 Tailwind v4 环境下编写高度复用的 子组件。 如何使用 defineProps 和 defineEmits 在 JS 组件间传递数据。 现在在 src/components 目录下新建以下四个文件： TaskHeader.vue（纯展示） TaskInput.vue（输入逻辑..
状态管理与数据持久化 上一章节已经完成了组件化，我们现在面临最后一个实战痛点：页面刷新，数据全丢。 为了解决这个问题，我们将引入 Vue 官方推荐的状态管理库 Pinia，并结合 Tailwind v4 的样式能力，实现数据的持久化存储。 Pinia 状态管理与数据持久化 Pinia 是 Vue.js 的轻量级状态管理库，它让你能够在组件之间共享和管理状态，我们可以把 Pinia 想象成一个全局的数据仓库，所有组件都可以从这里获取数据..