渐进式 JavaScript 框架 Vue 3 备忘清单的快速参考列表，包含常用 API 和示例。
+Vue 是一套用于构建用户界面的渐进式框架
+ + +注意：Vue 3.x 版本对应 Vue Router 4.x 路由版本
+已安装 16.0 或更高版本的 Node.js
$ npm init vue@latest
+指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具
+✔ Project name: … <your-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 ./<your-project-name>...
+Done.
+安装依赖并启动开发服务器
+$ cd <your-project-name>
+$ npm install
+$ npm run dev
+当你准备将应用发布到生产环境时，请运行：
+$ npm run build
+此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本
import { createApp } from 'vue'
+
+const app = createApp({
+ data() {
+ return { count: 0 }
+ }
+})
+app.mount('#app')
+挂载应用
+<div id="app">
+ <button @click="count++">
+ {{ count }}
+ </button>
+</div>
+<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+<div id="app">{{ message }}</div>
+<script>
+ const { createApp } = Vue
+ createApp({
+ data() {
+ return {
+ message: 'Hello Vue!'
+ }
+ }
+ }).mount('#app')
+</script>
+<div id="app">{{ message }}</div>
+<script type="module">
+ import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
+ createApp({
+ data() {
+ return {
+ message: 'Hello Vue!'
+ }
+ }
+ }).mount('#app')
+</script>
+<span>Message: {{ msg }}</span>
+使用的是 Mustache 语法 (即双大括号)，每次 msg 属性更改时它也会同步更新
<p>Using text interpolation: {{ rawHtml }}</p>
+<p>Using v-html directive: <span v-html="rawHtml"></span></p>
+双大括号{{}}会将数据解释为纯文本，使用 v-html 指令，将插入 HTML
<div v-bind:id="dynamicId"></div>
+简写
+<div :id="dynamicId"></div>
+<button :disabled="isButtonDisabled">
+ Button
+</button>
+data() {
+ return {
+ objectOfAttrs: {
+ id: 'container',
+ class: 'wrapper'
+ }
+ }
+}
+通过不带参数的 v-bind，你可以将它们绑定到单个元素上
<div v-bind="objectOfAttrs"></div>
+{{ number + 1 }}
+{{ ok ? 'YES' : 'NO' }}
+{{ message.split('').reverse().join('') }}
+
+<div :id="`list-${id}`"></div>
+<!-- 这是一个语句，而非表达式 -->
+{{ var a = 1 }}
+<!-- 条件控制也不支持，请使用三元表达式 -->
+{{ if (ok) { return message } }}
+<span :title="toTitleDate(date)">
+ {{ formatDate(date) }}
+</span>
+<p v-if="seen">Now you see me</p>
+<a v-bind:href="url"> ... </a>
+<!-- 简写 -->
+<a :href="url"> ... </a>
+<a v-on:click="doSomething"> ... </a>
+<!-- 简写 -->
+<a @click="doSomething"> ... </a>
+<a v-bind:[attributeName]="url"> ... </a>
+<!-- 简写 -->
+<a :[attributeName]="url"> ... </a>
+这里的 attributeName 会作为一个 JS 表达式被动态执行
<a v-on:[eventName]="doSomething"> ... </a>
+<!-- 简写 -->
+<a @[eventName]="doSomething">
+<form @submit.prevent="onSubmit">
+ ...
+</form>
+.prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()
v-on:submit.prevent="onSubmit"
+──┬─ ─┬──── ─┬───── ─┬──────
+ ┆ ┆ ┆ ╰─ Value 解释为JS表达式
+ ┆ ┆ ╰─ Modifiers 由前导点表示
+ ┆ ╰─ Argument 跟随冒号或速记符号
+ ╰─ Name 以 v- 开头使用速记时可以省略
+渐进式 JavaScript 框架 Vue 2 备忘清单的快速参考列表，包含常用 API 和示例。
+渐进式 JavaScript 框架 Vue 2 备忘清单的快速参考列表，包含常用 API 和示例。
注意：Vue 2.x 版本对应 Vue Router 3.x 路由版本
npx @vue/cli create hello-world