From 75fece7aabbd8b593e0d584a885f2ce2a7ce7791 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Sun, 30 Oct 2022 01:44:38 +0800 Subject: [PATCH] feat: add `vue.md` cheatsheet. (#10) --- README.md | 1 + docs/vue.md | 271 +++++++++++++++++++++++++++++++++++++++++ docs/vue2.md | 4 +- scripts/assets/vue.svg | 4 + 4 files changed, 279 insertions(+), 1 deletion(-) create mode 100644 docs/vue.md create mode 100644 scripts/assets/vue.svg diff --git a/README.md b/README.md index 74c7731b..c4eb9301 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ Quick Reference [RegEx](./docs/regex.md) [TypeScript](./docs/typescript.md) [Vue 2](./docs/vue2.md) +[Vue 3 (努力中...)](./docs/vue.md) ## Nodejs diff --git a/docs/vue.md b/docs/vue.md new file mode 100644 index 00000000..1263e971 --- /dev/null +++ b/docs/vue.md @@ -0,0 +1,271 @@ +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 + +
{{ message }}
+ +``` + + +### 使用 ES 模块构建版本 + +```html +
{{ message }}
+ +``` + + +模板语法 +--- + +### 文本插值 + +```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- 开头使用速记时可以省略 +``` \ No newline at end of file diff --git a/docs/vue2.md b/docs/vue2.md index 81574213..546e7bf2 100644 --- a/docs/vue2.md +++ b/docs/vue2.md @@ -1,7 +1,7 @@ Vue2 备忘清单 === -渐进式 JavaScript 框架 Vue 2 备忘清单的快速参考列表，包含常用 API 和示例。 +渐进式 JavaScript 框架 [Vue 2](https://v2.cn.vuejs.org/) 备忘清单的快速参考列表，包含常用 API 和示例。 入门 --- @@ -14,6 +14,8 @@ Vue 是一套用于构建用户界面的渐进式框架 - [Vue Router 3.x 官方文档](https://v3.router.vuejs.org/) +注意：Vue 2.x 版本对应 Vue Router 3.x 路由版本 + #### 快速创建 **Vue** 项目 ([Vue CLI](https://cli.vuejs.org/zh/guide/creating-a-project.html)) ```bash diff --git a/scripts/assets/vue.svg b/scripts/assets/vue.svg new file mode 100644 index 00000000..a2dcf8c3 --- /dev/null +++ b/scripts/assets/vue.svg @@ -0,0 +1,4 @@ + + + +