《Vue3中文官方文档》-Vue3_Vue教程_Vue入门教程_Vue3中文教程_Vue3文档教程

《Vue3中文官方文档》
价格：免费
状态：全书已完结
在读人数：15
热度：1678

创建者

柠檬酸
13 粉丝 47博客

内容简介

本书是一本关于Vue3开发的学习教程。作者以一个初学者的姿态从零开始，一步一步，从开发环境的搭建开始，到可运行实例的编写，再到组件化的应用，手把手的教你掌握Vue3的开发。本书对于初学者来说是一本不可多得的好教程。

章节目录

第一章学习前的准备知识
1.1 什么是 Vue
什么是 Vue？ Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。下面是一个最基本的
1.2 快速创建一个 Vue 应用
创建一个 Vue 应用前提条件 1.熟悉命令行 2.已安装 16.0 或更高版本的 Node.js 在本节中，我们将介绍如何在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SF
第二章 Vue基础
2.1 从一个简单的Vue实例开始
应用实例每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例： import { createApp } from 'vue'const app = createApp({/* 根组件
2.2 Vue模板语法
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，
2.3 响应式基础
声明响应式状态选用选项式 API 时，会用 data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数。Vue 将在创建新组件实例的时候调用此函数，并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 this) 上。 export default {data() {return {count: 1}},// `
2.4 计算属性
基础示例模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。比如说，我们有这样一个包含嵌套数组的对象： export default {data() {return {author: {name: 'Jo
2.5 类与样式绑定
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，
2.6 条件渲染
v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。 <h1 v-if="awesome">Vue is awesome!</h1> v-else 你也可以使用 v-else 为 v-if 添加一个“else
2.7 列表渲染(for循环)
v-for 我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名： js data() {return {items: [{ message: 'Foo' }, { message: 'Bar' }]} } temp
2.8 事件处理
监听事件我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。事件处理器的值可以是：内联事件处理器：事件被触发时执
2.9 表单输入绑定
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦： <input:value="text"@input="event => text = event
2.10 生命周期钩子
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。注册周期钩子举例
2.11 侦听器
基本示例计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。在选项式 API 中，我们可以使用 watch 选项在每次响应式属性发生变化时触发一个函数。 export defaul
2.12 模板引用
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute： <input ref="input"&g
2.13 组件基础
组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定
第三章深入组件
3.1 组件注册
一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。全局注册我们可以使用 Vue 应用实例的 app.component() 方法，让组件在当前
3.2 Props
Props 声明一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute (关于透传 attribute，我们会在专门的章节中讨论)。props 需要使用 props 选项来定义： export default {props: ['foo'],created() {
3.3 组件事件
触发与监听事件在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：  <button @click="$emit('someEvent')">click m
3.4 透传 Attributes
Attributes 继承 “透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。举例来
3.5 插槽 Slots
插槽内容与出口在之前的章节中，我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props，但组件要如何接收模板内容呢？在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。举例来说，这里有一个 <FancyButton> 组件，可以像这样使用： &
3.6 依赖注入
Prop 逐级透传问题通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：注意，虽然这里的 <Foot
3.7 异步组件
基本用法在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能： import { defineAs
第四章逻辑复用
4.1 组合式函数
什么是“组合式函数”？在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多
4.2 自定义指令
介绍除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。我们已经介绍了两种在 Vue 中重用代码的方式：组件和组合式函数。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自定义指令主要是为了重用
4.3 插件
介绍插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例： import { createApp } from 'vue' const app = createApp({}) app.use(myPlugin, {/* 可选的选项 */
第五章内置组件
5.1 Transition
Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画： <Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。 <TransitionGroup> 会在一个 v-for 列
5.2 TransitionGroup
<TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。和 <Transition> 的区别 <TransitionGroup> 支持和 <Transition> 基本相
5.3 KeepAlive
<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。基本使用在组件基础章节中，我们已经介绍了通过特殊的 <component> 元素来实现动态组件的用法： <component :is="activeComponent" /> 默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所
5.4 Teleport
<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。基本用法有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个
5.5 Suspense
实验性功能: <Suspense> 是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。异步依
第六章应用规模化
6.1 单文件组件
介绍 Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例： <s
6.2 工具链
项目脚手架 Vite Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！要使用 Vite 来创建一个 Vue 项目，非常简单： npm init vue
6.3 路由
客户端 vs. 服务端路由服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。然而，在单页面应用中，客
6.4 状态管理
什么是状态管理？理论上来说，每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例： <script> export default {// 状态data() {return {count: 0}},// 动作methods: {increment() {this
6.5 测试
为什么需要测试自动化测试能够预防无意引入的 bug，并鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件。这能够帮助你和你的团队更快速、自信地构建复杂的 Vue 应用。与任何应用一样，新的 Vue 应用可能会以多种
6.6 服务端渲染 (SSR)
什么是 SSR？ Vue.js 是一个用于构建客户端应用的框架。默认情况下，Vue 组件的职责是在浏览器中生成和操作 DOM。然而，Vue 也支持将组件在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用。一
第七章最佳实践
7.1 生产部署
开发环境 vs. 生产环境在开发过程中，Vue 提供了许多功能来提升开发体验： 1.对常见错误和隐患的警告 2.对组件 props / 自定义事件的校验 3.响应性调试钩子 4.开发工具集成然而，这些功能在生产环境中并不会被使用，一些警告检查也会产生少量的性能
7.2 性能优化
概述 Vue 在大多数常见场景下性能都是很优秀的，通常不需要手动优化。然而，总会有一些具有挑战性的场景需要进行针对性的微调。在本节中，我们将讨论用 Vue 开发的应用在性能方面该注意些什么。首先，让我们区分一下 web 应用性能的两个主要方面： 1.页面加载性能：首次访问时，应用展示出内容与达到可交互状态的速度。这通常会用 Google 所定义的一系列 Web 指标
7.3 无障碍访问
Web 无障碍访问 (也称为 a11y) 是指创建可供任何人使用的网站的做法——无论是身患某种障碍、通过慢速的网络连接访问、使用老旧或损坏的硬件，还是仅处于某种不方便的环境。例如，在视频中添加字幕可以帮助失聪、有听力障碍或身处嘈杂环境而听不到手机的用户。同样地，确保文字样式没有处于太低的对比度，可以对低视力用户和在明亮的强光下使用手机的用户
7.4 安全
报告漏洞当一个漏洞被上报时，它会立刻成为我们最关心的问题，会有全职的贡献者暂时搁置其他所有任务来解决这个问题。如需报告漏洞，请发送电子邮件至 security@vuejs.org。虽然很少发现新的漏洞，但我们仍建议始终使用最新版本的 Vue 及其官方配套库，以确保你的应用尽可能地安全。首要规则：
第八章 TypeScript
8.1 搭配 TypeScript 使用 Vue
像 TypeScript 这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误，也让我们在重构大型项目的时候更有信心。通过 IDE 中基于类型的自动补全，TypeScript 还改善了开发体验和效率。Vue 本身就是用 TypeScript 编写的，并对 TypeScript 提供了一等公民的支持。所有的 Vue
8.2 TypeScript 与组合式 API
为组件的 props 标注类型使用 <script setup> 当使用 <script setup> 时，defineProps() 宏函数支持从它的参数中推导类型： <script setup lang="ts"&
8.3 TypeScript 与选项式 API
TIP：虽然 Vue 的确支持在选项式 API 中使用 TypeScript，但在使用 TypeScript 的前提下更推荐使用组合式 API，因为它提供了更简单、高效和可靠的类型推导。为组件的 props 标注类型选项式 API 中对 props 的类型推导需要用 defineComponent() 来包装组件。有了它，Vue 才可以通过 props 以及一些额外的选项，比如 require
第九章进阶
9.1 使用 Vue 的多种方式
在 Web 的世界中从来就没有可以适配所有场景、解决所有问题的银弹。正因如此，Vue 被设计成一个灵活的、可以渐进式集成的框架。根据使用场景的不同需要，相应地有多种不同的方式来使用 Vue，以此在技术栈复杂度、开发体验和性能
9.2 组合式 API 常见问答
什么是组合式 API？组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：响应式 API：例如 ref() 和 reactive()，使我们可以直接创建
9.3 深入响应式系统
Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时，视图会随即自动更新。这让状态管理更加简单直观，但理解它是如何工作的也是很重要的，这可以帮助我们避免一些常见的陷
9.4 渲染机制
Vue 是如何将一份模板转换为真实的 DOM 节点的，又是如何高效地更新这些节点的呢？我们接下来就将尝试通过深入研究 Vue 的内部渲染机制来解释这些问题。虚拟 DOM 你可能已经听说过“虚拟 DOM”的概念了，Vue 的渲染系统正是基于这个概
9.5 渲染函数 & JSX
在绝大多数情况下，Vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。如果你还不熟悉虚拟 DOM 和渲染函数的概念的话，请确保先阅读渲染机制章节。基本用法创建 Vnodes Vue 提供了一个 h() 函
9.6 Vue 与 Web Components
Web Components 是一组 web 原生 API 的统称，允许开发者创建可复用的自定义元素 (custom elements)。我们认为 Vue 和 Web Components 是互补的技术。Vue 为使用和创建自定义元素提供了出色的支持。无论你是将自定义元素集成到现有的 Vue 应用中，还是使用 V
9.7 动画技巧
Vue 提供了 <Transition> 和 <TransitionGroup> 组件来处理元素进入、离开和列表顺序变化的过渡效果。但除此之外，还有许多其他制作网页动画的方式在 Vue 应用中也适用。这里我们会探讨一些额外的技巧。基于 CSS class 的动画对
9.8 响应性语法糖
实验性功能响应性语法糖目前是一个实验性功能，默认是禁用的，需要显式选择使用。具体设计在最终定稿前仍可能发生变化，你可以查看 GitHub 上的提案与讨论来关注和跟进最新进展。组合式 API 特有响应性语法糖是组合式 API 特有的功能，且必须通过构建步骤使用。ref vs. 响应式变量自从引入组合式 API 的概念