Learning Path
浏览 Vue 3 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
119
Vue3 教程 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单，本教程基于 Vue3 以上版本测试。 渐进式框架 渐进式框架是指那些允许开发者根据项目需求逐步引入和使用其功能的框架，而不需要一次性全部使用框架的特性。 常..
响应式数据 响应式是 Vue3 最核心的概念。本章你将理解什么是响应式，学会用 ref 和 reactive 管理数据，并实现分类筛选功能。 什么是响应式？ 响应式的意思是：当数据变化时，页面自动更新。 传统的 JS 写法是这样的：修改了变量，还得手动去更新 DOM。 而 Vue3 的响应式系统会自动追踪数据变化，并通知视图刷新——你只需要关心数据，不用操心 DOM。 实例 [mycode4 type='html&..
Vite 教程 Vite 是一个现代化的前端构建工具，旨在通过利用现代浏览器的原生 ES 模块支持，提供快速的开发体验。 Vite 由两部分组成：开发服务器： 基于原生 ES 模块，提供超快的热更新。构建命令： 使用 Rollup 打包代码，生成适用于生产环境的优化静态资源。 Vite 需要 Node.js 版本 18+ 或 20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的..
Vue3 计算属性计算属性用于根据其他数据的变化动态计算衍生出来的属性值，而且具有缓存机制，只有相关依赖发生变化时才会重新计算。 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子： 实例 1 [mycode3 type='html'] {{ message.split('').reverse().join('..
Vue 组件实例 在 Vue.js 中，组件实例是 Vue 应用中最基本的构建块之一。每个组件实例都是一个 Vue 组件，它具有自己的模板、数据、方法和生命周期钩子，可以独立地管理自己的状态和行为。以下是关于 Vue 组件实例的详细介绍： Vue 组件实例的创建 在 Vue.js 中，创建一个组件实例通常通过 createApp 方法和组件选项对象来实现。组件选项对象可以包含如下属性： data: 数据对象，用于存储组件的响应式数据。..
Vue 实例选项 Vue 中的选项是使用 Options API 时在 Vue 实例上可用的不同选项。 Vue 实例的一些常见选项： el - 指定 Vue 实例挂载的 DOM 元素。如果不提供，则 Vue 实例不会自动挂载。 data - 定义了 Vue 实例的数据对象。Vue 实例的模板和计算属性、方法、观察者等都可以访问这些数据。 computed - 包含计算属性，这些属性的值是基于它们的依赖进行缓存的，只有当依..
Vue3 Ajax(axios) Vue 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Github开源地址： https://github.com/axios/axios 安装方法 使用 cdn: 或 使用 npm: $ npm install axios 使用 bower: $ bower instal..
Vue3 app.component() 函数 Vue3 全局 API app.component() 函数是一个非常重要的工具，它允许我们全局注册组件。通过 app.component()，我们可以在应用的任何地方使用这些组件，而不需要每次都单独导入。 1. 什么是 app.component() 函数？ app.component() 是 Vue.js 3 中的一个全局 API，用于注册一个全局组件。全局组件意味着一旦注册..
Vue3 app.config.compilerOptions 属性 Vue3 全局 API app.config.compilerOptions 是一个重要的配置选项，它允许开发者对 Vue 应用的编译行为进行细粒度的控制。 app.config.compilerOptions 是 Vue 3 中用于配置编译器行为的对象。它属于 Vue 应用实例 (app) 的配置对象 (config)，专门用于控制模板编译时的行为。通过设置..
Vue3 app.config.errorHandler 属性 Vue3 全局 API app.config.errorHandler 是一个非常实用的属性，它允许开发者全局捕获和处理应用程序中的错误。 1. 什么是 app.config.errorHandler？ app.config.errorHandler 是 Vue3 中的一个全局配置选项，用于捕获和处理应用程序中的未捕获错误。无论是组件的生命周期钩子函数、事件处理程序..
Vue3 app.config.globalProperties 属性 Vue3 全局 API app.config.globalProperties 是 Vue 应用实例的一个配置项，它允许我们向全局添加一些自定义的属性或方法。这些属性或方法可以在应用的任何组件中直接通过 this 访问。 如何使用 globalProperties？ 1. 创建 Vue 应用实例 首先，我们需要创建一个 Vue 应用实例，然后通过 app.co..
Vue3 app.config.idPrefix 属性 Vue3 全局 API app.config.idPrefix 是 Vue 3 应用实例的一个配置项，允许你为所有组件的 ID 添加一个自定义的前缀。这在以下场景中非常有用： 避免 ID 冲突：当多个 Vue 应用或组件在同一页面上运行时，可能会发生 ID 冲突。通过设置 idPrefix，可以为每个应用的组件 ID 添加唯一的前缀。 提高可读性：为组件 ID 添加前缀可以..
Vue3 app.config.optionMergeStrategies 属性 Vue3 全局 API 在 Vue 3 中，app.config.optionMergeStrategies 是一个用于自定义选项合并策略的配置属性。它允许开发者在创建 Vue 应用时，对组件的选项（如 data、methods、computed 等）进行自定义的合并逻辑。这一特性在处理混入（Mixins）或高级组件继承时非常有用。 什么是选项合并..
Vue3 app.config.performance 属性 Vue3 全局 API app.config.performance 是一个非常有用的配置属性，它允许开发者开启或关闭性能跟踪功能。 app.config.performance 是 Vue 3 中的一个全局配置项，用于控制是否启用性能跟踪。默认情况下，该属性是关闭的（false）。当将其设置为 true 时，Vue 将会在开发模式下对组件的渲染性能进行跟踪，并将相..
Vue3 app.config.throwUnhandledErrorInProduction 属性 Vue3 全局 API app.config.throwUnhandledErrorInProduction 是 Vue 3 中的一个全局配置属性，专门用于控制生产环境下的错误处理行为。默认情况下，Vue 3 在生产环境中会捕获未处理的错误并静默处理，以避免应用程序崩溃。然而，这种默认行为可能会隐藏一些潜在的问题，导致开发者难以发..
Vue3 app.config.warnHandler 属性 Vue3 全局 API app.config.warnHandler 是一个非常有用的配置属性，它允许开发者自定义如何处理 Vue 应用程序中的警告信息。 1. 什么是 app.config.warnHandler？ app.config.warnHandler 是 Vue 3 提供的一个全局配置选项，用于捕获和处理 Vue 应用中的警告信息。默认情况下，Vue 会在..
Vue3 app.config 属性：深入了解全局配置 Vue3 全局 API app.config 是一个非常重要的全局配置对象，它允许你在应用程序级别进行各种设置和配置。 1. 什么是 app.config？ 在 Vue3 中，当你创建一个应用程序实例时，可以通过 createApp 函数来实现。这个函数返回的应用程序实例包含一个 config 属性，即 app.config。这个对象用于存储和配置应用程序的全局设置。 实..
Vue3 app.directive() 函数详解 Vue3 全局 API app.directive() 是一个非常强大的函数，它允许开发者自定义全局指令。指令是 Vue 提供的一种特殊功能，用于直接操作 DOM 元素，通过 app.directive()，你可以定义自己的指令，并在整个应用中使用它们。 1. 什么是指令？ 指令是 Vue 中的一种特殊属性，以 v- 开头。Vue 内置了一些常用的指令，如 v-if、v-for、..
Vue3 app.mixin() 函数 Vue3 全局 API app.mixin() 是一个非常强大的函数，它允许你在全局范围内混入 (mixin) 代码。混入是一种将可复用的代码片段注入到组件中的方式，可以帮助你避免重复代码，提高代码的可维护性。 app.mixin() 允许你在全局范围内混入代码，从而提高代码的复用性和可维护性。通过合理地使用混入，你可以简化组件的开发过程，避免代码重复。然而，全局混入的使用需要谨慎，以避免..
Vue3 app.mount() 函数详解 Vue3 全局 API 在 Vue3 中，app.mount() 是的作用是将 Vue 应用挂载到 DOM 元素上。 1. Vue3 应用的基本结构 在 Vue3 中，我们首先需要创建一个 Vue 应用实例。通常情况下，我们可以通过 createApp() 函数来创建一个应用实例： 实例 [mycode4 type='javascript'] import {..
Vue3 app.onUnmount() 函数详解 Vue3 全局 API app.onUnmount() 是一个用于添加组件卸载时执行的回调函数的 API。 app.onUnmount() 是 Vue 3 中一个非常有用的 API，它帮助开发者在组件卸载时执行必要的清理操作，避免内存泄漏和资源浪费。通过合理使用 app.onUnmount()，可以提升应用程序的稳定性和性能。 1. 什么是 app.onUnmount()？ ..
Vue3 app.provide() 函数 Vue3 全局 API app.provide() 是一个非常重要的函数，它允许我们在应用的顶层提供数据或方法，使得这些数据或方法可以在整个应用的任何组件中被访问和使用。 通过 app.provide() 和 inject 的组合，我们可以轻松地在多个组件之间共享数据，避免 props 和事件的繁琐传递。 1. 什么是 app.provide()？ app.provide() 是 ..
Vue3 app.runWithContext() 函数详解 Vue3 全局 API app.runWithContext() 函数是一个强大的工具，它允许我们在特定的应用上下文中执行代码，这对于在 Vue 组件之外管理状态或处理逻辑非常有用。 如果你有更多关于 app.runWithContext() 的问题或需要进一步的帮助，请随时提问！ 1. 什么是 app.runWithContext()？ app.runWithC..
Vue3 app.unmount() 函数 Vue3 全局 API 在 Vue3 中，app.unmount() 用于卸载（即销毁）已经挂载的 Vue 应用实例。 app.unmount() 是 Vue3 中一个非常有用的函数，它允许你安全地销毁 Vue 应用实例，并释放相关资源。 1. 什么是 app.unmount()？ app.unmount() 是 Vue3 提供的一个全局 API，用于卸载已经挂载的 Vue 应用实例。..