Vue 3 备忘清单 === 渐进式 JavaScript 框架 [Vue 3](https://cn.vuejs.org/) 备忘清单的快速参考列表，包含常用 API 和示例。入门 --- ### 介绍 Vue 是一套用于构建用户界面的渐进式框架 - [Vue 3.x 官方文档](https://cn.vuejs.org/) - [Vue Router 4.x 官方文档](https://router.vuejs.org/zh/) 注意：Vue 3.x 版本对应 Vue Router 4.x 路由版本 ### 创建应用已安装 `16.0` 或更高版本的 Node.js ```bash $ npm init vue@latest ``` 指令将会安装并执行 [create-vue](https://www.npmjs.com/package/create-vue)，它是 Vue 官方的项目脚手架工具 ```bash ✔ Project name: … ✔ Add TypeScript? … No/Yes ✔ Add JSX Support? … No/Yes ✔ Add Vue Router for Single Page Application development? … No/Yes ✔ Add Pinia for state management? … No/Yes ✔ Add Vitest for Unit testing? … No/Yes ✔ Add Cypress for both Unit and End-to-End testing? … No/Yes ✔ Add ESLint for code quality? … No/Yes ✔ Add Prettier for code formatting? … No/Yes Scaffolding project in ./... Done. ``` 安装依赖并启动开发服务器 ```bash $ cd $ npm install $ npm run dev ``` 当你准备将应用发布到生产环境时，请运行： ```bash $ npm run build ``` 此命令会在 `./dist` 文件夹中为你的应用创建一个生产环境的构建版本 ### 应用实例 ```js import { createApp } from 'vue' const app = createApp({ data() { return { count: 0 } } }) app.mount('#app') ``` 挂载应用 ```html

``` ### 通过 CDN 使用 Vue ```html

``` ### 使用 ES 模块构建版本 ```html

``` 模板语法 --- ### 文本插值 ```html Message: {{ msg }} ``` 使用的是 `Mustache` 语法 (即双大括号)，每次 `msg` 属性更改时它也会同步更新 ### 原始 HTML ```html

Using text interpolation: {{ rawHtml }}

Using v-html directive:

``` 双大括号`{{}}`会将数据解释为纯文本，使用 `v-html` 指令，将插入 HTML ### Attribute 绑定 ```html

``` 简写 ```html

``` ### 布尔型 Attribute ```html ``` ### 动态绑定多个值 ```js data() { return { objectOfAttrs: { id: 'container', class: 'wrapper' } } } ``` 通过不带参数的 `v-bind`，你可以将它们绑定到单个元素上 ```html

``` ### 使用 JavaScript 表达式 ```html {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}

``` ### 仅支持表达式(例子都是无效) ```html {{ var a = 1 }} {{ if (ok) { return message } }} ``` ### 调用函数 ```html {{ formatDate(date) }} ``` ### 指令 Directives ```html

Now you see me

``` ### 参数 Arguments ```html ... ... ``` ### 绑定事件 ```html ... ... ``` ### 动态参数 ```html ... ... ``` 这里的 `attributeName` 会作为一个 JS 表达式被动态执行 ### 动态的事件名称 ```html ... ``` ### 修饰符 Modifiers ```html ``` `.prevent` 修饰符会告知 `v-on` 指令对触发的事件调用 `event.preventDefault()` ### 指令语法 ```bash v-on:submit.prevent="onSubmit" ──┬─ ─┬──── ─┬───── ─┬────── ┆ ┆ ┆ ╰─ Value 解释为JS表达式 ┆ ┆ ╰─ Modifiers 由前导点表示 ┆ ╰─ Argument 跟随冒号或速记符号 ╰─ Name 以 v- 开头使用速记时可以省略 ``` 响应式基础 --- ### 声明状态 ```html