#官方 Router对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router 文档。#从零开始简单的路由如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染 ...……

#介绍虽然 Vue.js 本身并不支持移动应用开发，但是有很多解决方案可以用 Vue.js 创建原生 iOS 和 Android 应用。#混合应用开发#CapacitorCapacitor 是一个来自 Ionic Team 的项目，通过提供跨多个平台运行的 API，开 ...……

Vue CLI 提供内置的 TypeScript 工具支持。#NPM 包中的官方声明随着应用的增长，静态类型系统可以帮助防止许多潜在的运行时错误，这就是为什么 Vue 3 是用 TypeScript 编写的。这意味着在 Vue 中使用 TypeScript 不 ...……

#介绍当构建可靠的应用时，测试在个人或团队构建新特性、重构代码、修复 bug 等工作中扮演了关键的角色。尽管测试的流派有很多，它们在 web 应用这个领域里主要有三大类：单元测试组件测试端到端 (E2E，end-to-end) ...……

#介绍在很多 Vue 项目中，我们使用 app.component 来定义全局组件，紧接着用 app.mount(#app) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定 ...……

该页面仅适用于 Vue 2.x 及更低版本，并假定你已经阅读了响应性部分。请先阅读该部分。由于 JavaScript 的限制，有些 Vue 无法检测的更改类型。但是，有一些方法可以规避它们以维持响应性。#对于对象Vue 无法检测到 ...……

为了学习如何更好地使用 Vue，不需要阅读本页，但是它提供了更多信息，如果你想知道渲染在背后是如何工作的。#虚拟 DOM现在我们知道了侦听器是如何更新组件的，你可能会问这些更改最终是如何应用到 DOM 中的！也许你 ...……

本节代码示例使用单文件组件的语法本指南假定你已经阅读了组合式 API 简介和响应性基础。如果你不熟悉组合式 API，请先阅读此文章。在使用组合式 API 时，响应式引用和模板引用的概念是统一的。为了获得对模板内元素 ...……

本指南假定你已经阅读了 Provide / Inject、组合式 API 介绍和响应性基础。如果你不熟悉组合式 API，请先阅读这篇文章。我们也可以在组合式 API 中使用 provide/inject。两者都只能在当前活动实例的 setup() 期间调 ...……

本指南假定你已经阅读了 组合式 API 简介和响应性基础。如果你不熟悉组合式 API，请先阅读这篇文章。在 Vue Mastery 上观看关于生命周期钩子的免费视频你可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周 ...……

本节使用单文件组件代码示例的语法本指南假定你已经阅读了组合式 API 简介和响应性原理。如果你不熟悉组合式 API，请先阅读这篇文章。#参数使用 setup 函数时，它将接受两个参数：propscontext让我们更深入地研究如 ...……

提示在阅读文档之前，你应该已经熟悉了这两个 Vue 基础和创建组件。在 Vue Mastery 上观看关于组合式 API 的免费视频。通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可 ...……

本节使用单文件组件语法作为代码示例#计算值有时我们需要依赖于其他状态的状态——在 Vue 中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用 computed 方法：它接受 getter 函数并为 getter 返回的值返 ...……

#声明响应式状态要为 JavaScript 对象创建响应式状态，可以使用 reactive 方法：import { reactive } from vue// 响应式状态const state = reactive({ count: 0})reactive 相当于 Vu_来自VUE3 教程 ...……

现在是时候深入了！Vue 最独特的特性之一，是其非侵入性的响应性系统。数据模型是被代理的 JavaScript 对象。而当你修改它们时，视图会进行更新。这让状态管理非常简单直观，不过理解其工作原理同样重要，这样你可以 ...……

插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object，也可以是 function插件的功能范围没有严格的限制——一般有下面几种：添加全局方法或者 property。如：vue-custom-element ...……

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。让我们深入一个简单的例子，这个例子里 render 函数 ...……

Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部，以构建一个组成应用程序 UI 的树。然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部 ...……

#简介除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用 ...……

#基础混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。例子：// define a ...……

Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：数字和运算颜色的显示SVG 节点的位置元素的大小和其他的 property这些数据要么本身就以数值形式存储，要么 ...……

目前为止，关于过渡我们已经讲到：单个节点同一时间渲染多个节点中的一个那么怎么同时渲染整个列表，比如使用 v-for？在这种场景中，使用 transition-group 组件。在我们深入例子之前，先了解关于这个组件的几个特点 ...……

在插入、更新或从 DOM 中移除项时，Vue 提供了多种应用转换效果的方法。这包括以下工具：自动为 CSS 转换和动画应用 class；集成第三方 CSS 动画库，例如 animate.css ；在过渡钩子期间使用 JavaScript 直接操作 DOM ...……

Vue 提供了一些抽象概念，可以帮助处理过渡和动画，特别是在响应某些变化时。这些抽象的概念包括：在 CSS 和 JS 中，使用内置的 transition 组件来钩住组件中进入和离开 DOM。过渡模式，以便你在过渡期间编排顺序。 ...……

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。提示这里记录的都是和处理边界情况有关的功能，即一些需要对 Vue 的规则做一些小调整的特殊情况。不过注意这些功能都是有劣势或危险的 ...……

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。尽管存在 prop 和事件，但有时你可能仍然需要直接访问 JavaScript 中的子组件。为此，可以使用 ref attribute 为子组件或 HTML 元素指 ...……

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。#在动态组件上使用 keep-alive我们之前曾经在一个多标签的界面中使用 is attribute 来切换不同的组件：component :is=currentTabCompon ...……

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。通常，当我们需要将数据从父组件传递到子组件时，我们使用 props。想象一下这样的结构：你有一些深嵌套的组件，而你只需要来自深嵌套子 ...……

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。#插槽内容Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 slot 元素作为承载分发内容的出口。它 ...……

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。#事件名不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如 ...……

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style ...……

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。#Prop 类型到这里，我们只看到了以字符串数组形式列出的 prop：props: 但是，通_来自VUE3 教程 ...……

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。#组件名在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：const app = Vue.createApp({...})app ...……

基本实例这里有一个 Vue 组件的示例：// 创建一个Vue 应用const app = Vue.createApp({})// 定义一个名为 button-counter 的新全局组件app.component(button-counter, { data() {_来自VUE3 教程 ...……

#基础用法你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事 ...……

#监听事件我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click=methodName 或使用快捷方式 @click=methodName例如：div id=basic-e_来自VUE3 教程 ...……

#用 v-for 把一个数组对应为一组元素我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。ul id=a ...……

#v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。h1 v-if=awesomeVue is awesome!/h1也可以用 v-else 添加一个“else 块”：h1 v-i_来自VUE3 教程 ...……

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用 ...……

#计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如，有一个嵌套数组对象：Vue.createApp({ data() { return { author: { ...……