核心概念：

渐进式框架：灵活性强，可以用不同的方式使用，从单页应用(SPA)到全栈/服务端渲染(SSR)在到静态站点生成（SSG），以及桌面端、移动端、Webgl甚至命令行

单文件组件：是指将逻辑（JS）模板（HTML）和样式（CSS）放在同一个文件中

API风格：

• 选项式API ：用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted
• 组合式API：组合式 API 通常会与 <script setup> 搭配使用，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

基础

创建应用

官方默认的脚手架是create-vue， 打包工具（编译？）是vite 应用配置：可以通过app.config配置错误处理 和app.component进行组件注册，应用内任何地方可使用。

多个应用实例：| 如果你正在使用 Vue 来增强服务端渲染 HTML，并且只想要 Vue 去控制一个大型页面中特殊的一小部分，应避免将一个单独的 Vue 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去。

模板语法

文本插值：{{msg}}

[!文本插值和v-html的区别] 文本插值同步更新组件中的指定属性，但是会将数据解释为纯文本。 如果要插入一个纯html需要用v-html，但要注意在网站动态渲染HTML是很危险的，容易造成XSS漏洞。

属性绑定：v-bind

• 如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除
• 当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

//1. 简写
<div v-bind:id="dynamicId"></div>
等同于：用冒号简写
<div :id="dynamicId"></div>
//2. 布尔型属性：
<button :disabled="isButtonDisabled">Button</button>
//3.绑定多个值 不带参数
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}
<div v-bind="objectOfAttrs"></div>

JS表达式

使用JS表达式的场景：在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

• 在文本插值中 (双大括号)
• 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中 （引号中- [ ? ] ）

[!important]- 判断是否是JS表达式 一个简单的判断方法是是否可以合法地写在 return 后面。

• [?] 可以在绑定的表达式中使用一个组件暴露的方法：

1
2
3

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

表达式中受限的访问：

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。 没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

指令：带有 v- 前缀的特殊 attribute

指令 attribute 的期望值：为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 v-for、v-on 和 v-slot)。 指令的任务：是在其表达式的值变化时响应式地更新 DOM

动态参数 ⭐

1

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

动态参数的表达式的值应该是一个字符串or null

响应式基础

reactive()

通过reactive()函数创建一个响应式对象：

• vue会跟踪该对象的访问和更新
• 使用reactive()生命的状态都是默认深层响应式的

1
2
3

import {reactive} from 'vue'
const state = reactive({ count:0 })
//使用 state.count

[!info] reactive使用 在setup()函数中定义和返回，进行手动暴露 或者直接使用