Kolane的博客

方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串。的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。文件夹的作用就是存放公共资源，例如：图片、公共CSS或者字体图标等。每个 Vue 应用都是通过。应用实例必须在调用了。

想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦。可以帮助我们解决这一问题。一个父组件相对于其所有的后代组件，会作为。通常情况下，当我们需要从父组件向子组件传递数据时，会使用。除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖。任何后代的组件树，无论层级有多深，都可以。要注入上层组件提供的数据，需使用。注入会在组件自身的状态。

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。

来在多个组件间作切换时，被切换掉的组件会被卸载。组件强制被切换掉的组件仍然保持“存活”的状态。

有些场景会需要在两个组件间来回切换，比如 Tab 界面。

明治群岛”(Sandwich Islands)",组件的生命周期会随着我们对。

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。我们也确实有办法这么做！可以像对组件传递 props 那样，向一个插槽的出口上传递 attributes。message:“ComponentB中的数据”

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。其意思就是“将这部分模板片段传入子组件的 header 插槽中”在外部没有提供任何内容的情况下，可以为插槽指定默认内容。message:“message在父级”

我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props，但组件要如何接收模板内容呢？在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。(slot outlet)，标示了父元素提供的。(slot content) 将在哪里被渲染。

透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者。当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。

我们之前讲解过了组件之间的数据传递，和 自定义事件 两种方式。

如果是用户输入，我们希望在获取数据的同时发送数据配合。

A。

Vue 组件可以更细致地声明对传入的 props 的校验要求。prop 是只读的！

传递数据，不仅可以传递字符串类型的数据，还可以是其他类型，例如：数字、对象、数组等。类型的值都可以作为 props 的值被传递。A 只能接受字符串类型。B 只能接受数组类型。C 只能接受对象类型。

组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的。传递数据，只能从父级传递到子级，不能反其道而行。传递数据的解决方案就是。

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构。这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的。文件中，这被叫做单文件组件(简称 SFC)A 生效作用域，只在当前组件内生效。C 引用组件，在引用组件中生效。D 单文件组件必须存在的结构。D 单文件组件必须存在的结构。组件最大的优势就是可复用性。引用组件，在引用组件中生效。B 生效作用域，全局生效。

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的。挂载结束后引用都会被暴露在。

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦,单一的复选框，绑定布尔类型值。指令帮我们简化了这一步骤。

选项在每次响应式属性发生变化时触发一个函数。

将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为。是 attribute，我们可以和其他 attribute 一样使用。数据绑定的一个常见需求场景是操纵元素的 CSS style列表，因为。用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。绑定一个包含多个样式对象的数组。

将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为。数据绑定的一个常见需求场景是操纵元素的 CSS class 列表，因为。是 attribute，我们可以和其他 attribute 一样使用。用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果。一个计算属性仅会在其响应式依赖更新时才重新计算。来描述依赖响应式状态的复杂逻辑。会在重渲染发生时再次执行函数。

变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如。Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。当遇到的是非变更方法时，我们需要将旧的数组替换为新的。，这些都不会更改原数组，而总是。

地址：https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。为解决这一问题，Vue 为。

对象和通过事件传递数据。

来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。内联事件处理器通常用于简单场景。事件处理器的值可以是。

当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的。绑定的值期望是一个基础类型的值，例如字符串或 number 类型。的值，我们要确保每一条数据的唯一索引不会发生变化。Vue 默认按照“就地更新”的策略来更新通过。绑定的特殊 attribute。推荐在任何可行的时候为。

大多数情况，我们渲染的数据源来源于网络请求，也就是。也支持使用可选的第二个参数表示当前项的位置索引。，这更接近 JavaScript 的迭代器语法。指令基于一个数组来渲染一个列表。来遍历一个对象的所有属性。形式的特殊语法，其中。

的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。是“真实的”按条件渲染,它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS。元素无论初始条件如何，始终会被渲染，只有 CSS。

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上,双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用。如果你有像这样的一个包含多个 attribute 的 JavaScript 对象。，那么该 attribute 将会从渲染的元素上移除。非常常用，我们提供了特定的简写语法。attribute 与组件的。指令指示 Vue 将元素的。就是最常见的例子之一。

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在。双大括号将会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要使用。

创建项目，会出现很多文件及文件夹。我们通过Vue命令行工具。

构建工具让我们能使用 Vue 单文件组件 (SFC)。Vue 官方的构建流程是基于 Vite 的，一个现代、轻量、极速的构建工具。，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示。如果不确定是否要开启某个功能，你可以直接按下回车键选择。在项目被创建后，通过以下步骤安装依赖并启动开发服务器。这一指令将会安装并执行。推荐的 IDE 配置是。

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格。使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如。通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。选项所定义的属性都会暴露在函数内部的。上，它会指向当前的组件实例。

Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任官网文档地址：https://cn.vuejs.org/

渐进式 JavaScript 框架，易学易用，性能出色，适用场景丰富的 Web 前端框架。