01 vue基础

简介

核心功能

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

渐进式框架

Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。

无需构建步骤，渐进式增强静态的 HTML（独立脚本）
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

单文件组件

单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

API 风格

选项式 API 和组合式 API。

选项式 API (Options API)

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。

组合式 API (Composition API)

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。
组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

创建

应用实例
根组件
挂载应用

模板语法

文本插值（差值表达式）

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)

v-html

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html

Attribute 绑定

想要响应式地绑定一个 attribute，应该使用 v-bind。
v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
简写 <div :id="dynamicId"></div>
同名简写 <div :id></div>
动态绑定多个值

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}
<div v-bind="objectOfAttrs"></div>

JavaScript 表达式

Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式
场景

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中
特点
是否可以合法地写在 return 后面
调用函数:title="toTitleDate(date)"
受限的全局访问

指令 Directives

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括上面我们所介绍的 v-bind 和 v-html。
指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 v-for、v-on 和 v-slot)。
一个指令的任务是在其表达式的值变化时响应式地更新 DOM。

参数 Arguments

1 2	<a v-bind:href="url"> ... </a> <a :href="url"> ... </a>

动态参数

1 2	<a v-bind:[attributeName]="url"> ... </a> <a :[attributeName]="url"> ... </a>

修饰符 Modifiers

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。
!Pasted image 20250321224355.png