Vue 3 备忘清单

渐进式 JavaScript 框架 Vue 3 备忘清单的快速参考列表，包含常用 API 和示例。

入门

介绍

Vue 是一套用于构建用户界面的渐进式框架

注意：Vue 3.x 版本对应 Vue Router 4.x 路由版本

创建应用

已安装 16.0 或更高版本的 Node.js

  1. $ npm init vue@latest

指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具

  1. ✔ Project name: … <your-project-name>
  2. ✔ Add TypeScript? … No/Yes
  3. ✔ Add JSX Support? … No/Yes
  4. ✔ Add Vue Router for Single Page Application development? … No/Yes
  5. ✔ Add Pinia for state management? … No/Yes
  6. ✔ Add Vitest for Unit testing? … No/Yes
  7. ✔ Add Cypress for both Unit and End-to-End testing? … No/Yes
  8. ✔ Add ESLint for code quality? … No/Yes
  9. ✔ Add Prettier for code formatting? … No/Yes
  11. Scaffolding project in ./<your-project-name>...
  12. Done.

安装依赖并启动开发服务器

  1. $ cd <your-project-name>
  2. $ npm install
  3. $ npm run dev

当你准备将应用发布到生产环境时，请运行：

  1. $ npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本

应用实例

  1. import { createApp } from 'vue'
  3. const app = createApp({
  4.   data() {
  5.     return { count: 0 }
  6.   }
  7. })
  8. app.mount('#app')

挂载应用

  1. <div id="app">
  2.   <button @click="count++">
  3.     {{ count }}
  4.   </button>
  5. </div>

通过 CDN 使用 Vue

  1. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  2. <div id="app">{{ message }}</div>
  3. <script>
  4.   const { createApp } = Vue
  5.   createApp({
  6.     data() {
  7.       return {
  8.         message: 'Hello Vue!'
  9.       }
  10.     }
  11.   }).mount('#app')
  12. </script>

使用 ES 模块构建版本

  1. <div id="app">{{ message }}</div>
  2. <script type="module">
  3.   import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  4.   createApp({
  5.     data() {
  6.       return {
  7.         message: 'Hello Vue!'
  8.       }
  9.     }
  10.   }).mount('#app')
  11. </script>

模板语法

文本插值

  1. <span>Message: {{ msg }}</span>

使用的是 Mustache 语法 (即双大括号)，每次 msg 属性更改时它也会同步更新

原始 HTML

  1. <p>Using text interpolation: {{ rawHtml }}</p>
  2. <p>Using v-html directive: <span v-html="rawHtml"></span></p>

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

Attribute 绑定

  1. <div v-bind:id="dynamicId"></div>

简写

  1. <div :id="dynamicId"></div>

布尔型 Attribute

  1. <button :disabled="isButtonDisabled">
  2.   Button
  3. </button>

动态绑定多个值

  1. data() {
  2.   return {
  3.     objectOfAttrs: {
  4.       id: 'container',
  5.       class: 'wrapper'
  6.     }
  7.   }
  8. }

通过不带参数的 v-bind，你可以将它们绑定到单个元素上

  1. <div v-bind="objectOfAttrs"></div>

使用 JavaScript 表达式

  1. {{ number + 1 }}
  2. {{ ok ? 'YES' : 'NO' }}
  3. {{ message.split('').reverse().join('') }}
  5. <div :id="`list-${id}`"></div>

仅支持表达式(例子都是无效)

  1. <!-- 这是一个语句，而非表达式 -->
  2. {{ var a = 1 }}
  3. <!-- 条件控制也不支持，请使用三元表达式 -->
  4. {{ if (ok) { return message } }}

调用函数

  1. <span :title="toTitleDate(date)">
  2.   {{ formatDate(date) }}
  3. </span>

指令 Directives

  1. <p v-if="seen">Now you see me</p>

参数 Arguments

  1. <a v-bind:href="url"> ... </a>
  2. <!-- 简写 -->
  3. <a :href="url"> ... </a>

绑定事件

  1. <a v-on:click="doSomething"> ... </a>
  2. <!-- 简写 -->
  3. <a @click="doSomething"> ... </a>

动态参数

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

这里的 attributeName 会作为一个 JS 表达式被动态执行

动态的事件名称

  1. <a v-on:[eventName]="doSomething"> ... </a>
  2. <!-- 简写 -->
  3. <a @[eventName]="doSomething">

修饰符 Modifiers

  1. <form @submit.prevent="onSubmit">
  2.   ...
  3. </form>

.prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()

指令语法

  1. v-on:submit.prevent="onSubmit"
  2. ──┬─ ─┬──── ─┬─────  ─┬──────
  3.   ┆   ┆      ┆        ╰─ Value 解释为JS表达式
  4.   ┆   ┆      ╰─ Modifiers 由前导点表示
  5.   ┆   ╰─ Argument 跟随冒号或速记符号
  6.   ╰─ Name 以 v- 开头使用速记时可以省略