diff --git a/README.md b/README.md index cda8ea0..17f1110 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ Quick Reference [TOML](./docs/toml.md) [Markdown](./docs/markdown.md) [TypeScript](./docs/typescript.md) +[Vue 2](./docs/vue2.md) [YAML](./docs/yaml.md) @@ -69,7 +70,7 @@ Quick Reference 上面的列表没有看到你想要的？ 您是否正在寻找一些备忘清单或参考资料，或者您有一些片段备忘清单要分享，这是一个最好的机会！ -[`请求添加备忘单`](https://github.com/jaywcjlove/reference/issues/new?title=备忘清单+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove) +[`请求添加备忘单`](https://github.com/jaywcjlove/reference/issues/new?title=【备忘清单】+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove) [`我有一张备忘单`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) diff --git a/docs/find.md b/docs/find.md index 7c2a452..b3b114d 100644 --- a/docs/find.md +++ b/docs/find.md @@ -1,7 +1,7 @@ Find 备忘清单 === -这是 Linux find 命令备忘单的快速参考列表，包含常用选项和示例。 +这是 Linux find 命令备忘清单的快速参考列表，包含常用选项和示例。 入门 ---- diff --git a/docs/vue2.md b/docs/vue2.md new file mode 100644 index 0000000..8b4b414 --- /dev/null +++ b/docs/vue2.md @@ -0,0 +1,520 @@ +Vue2 备忘清单 +=== + +渐进式 JavaScript 框架 Vue 2 备忘清单的快速参考列表，包含常用 API 和示例。 + +入门 +--- + +### 介绍 + +Vue 是一套用于构建用户界面的渐进式框架 + +- [Vue 2.x 官方文档](https://v2.cn.vuejs.org/) +- [Vue Router 3.x 官方文档](https://v3.router.vuejs.org/) + +### 声明式渲染 + +```html +
+ {{ message }} +
+``` + +```js +var app = new Vue({ + el: '#app', + data: { + message: 'Hello Vue!' + } +}) +``` + +### 基础例子 + + +```html +
+

原始信息: "{{ message }}"

+

+ 计算的反向信息: "{{ reversedMessage }}" +

+
+``` + +```js +var vm = new Vue({ + el: '#example', + data: { + message: 'Hello' + }, + computed: { + // 计算属性的 getter + reversedMessage: function () { + // `this` 指向 vm 实例 + return this.message.split('') + .reverse().join('') + } + } +}) +``` + +结果 + +``` +原始信息: "Hello" +计算的反向信息: "olleH" +``` + +### 绑定元素属性 + +```html +
+ + 鼠标悬停几秒钟查看此处动态绑定的提示信息！ + +
+``` + +```js +var app2 = new Vue({ + el: '#app-2', + data: { + message: '页面加载于 ' + new Date() + .toLocaleString() + } +}) +``` + +### 条件 + +```html +
+

现在你看到我了

+
+``` + +```js +var app3 = new Vue({ + el: '#app-3', + data: { + seen: true + } +}) +``` + +控制切换一个元素是否显示 + +### 循环 + +```html +
+
    +
  1. + {{ todo.text }} +
    2. +
+
+``` + +```js +var app4 = new Vue({ + el: '#app-4', + data: { + todos: [ + { text: '学习 JavaScript' }, + { text: '学习 Vue' }, + { text: '整个牛项目' } + ] + } +}) +``` + +### 点击事件处理 + +```html +
+

{{ message }}

+ +
+``` + +```js +var app5 = new Vue({ + el: '#app-5', + data: { + message: 'Hello Vue.js!' + }, + methods: { + reverseMessage: function () { + this.message = this.message.split('') + .reverse().join('') + } + } +}) +``` + +### 输入事件处理 + +```html +
+

{{ message }}

+ +
+``` + +`v-model` 指令，它能轻松实现表单输入和应用状态之间的双向绑定 + +```js +var app6 = new Vue({ + el: '#app-6', + data: { + message: 'Hello Vue!' + } +}) +``` + +模板语法 +--- + +### 文本 + +```html +Message: {{ msg }} + + 这个将不会改变: {{ msg }} + +``` + +使用 `v-once` 指令，执行一次性地插值，当数据改变时，插值处的内容不会更新 + +### 原始 HTML + +```html +

解释为普通文本: {{ rawHtml }}

+

+ 使用 v-html 指令: + +

+``` + +使用 `v-html` 指令，输出真正的 `HTML` + +### 属性 + +```html +
+ +``` + +如果 `isDisabled` 的值是 null/undefined/false 则 `disabled` 不会被渲染出来 + +### JavaScript 表达式 + +```html +
+ 消息: {{ msg }} + {{ msg + '这是字符串' }} + {{ isWorking ? '是':'否' }} + {{ msg.getDetials() }} +
+
+``` + +### 指令 + +```html +

+ 现在你看到我了 +

+``` + +`v-if` 指令将根据表达式 `seen` 的值的真假来插入/移除 \

元素 + +### 指令参数 + +```html +... +``` + +`v-bind` 指令将该元素 `href` 属性与表达式 `url` 的值绑定 + +```html +... +``` + +`v-on` 指令，用于监听 DOM 事件，oSomething 是事件名 + +### 指令动态参数 **v2.6** + +```html +... +``` + +当 `eventName` 的值为 `focus` 时，`v-on:[eventName]` 将等价于 `v-on:focus` + +### 指令修饰符 + +```html +

+ ... +
+``` + +`.prevent` 修饰符告诉 `v-on` 指令对于触发的事件调用 `event.preventDefault()` + +### 指令缩写 + +```html + +... + +... + + ... +``` + +Class 与 Style 绑定 +--- + +### 对象语法 + +```html +
+ +
+``` + +传给 `v-bind:class` 一个对象，以动态地切换 `class` + +### 与普通的 class 属性共存 + + +```html {2} +
+``` + +如下 data + +```js +data: { + isActive: true, + hasError: false +} +``` + +结果渲染为 + +```html +
+``` + +### 绑定的数据对象不必内联定义在模板里 + + +```html +
+``` + +如下 data + +```js +data: { + classObject: { + active: true, + 'text-danger': false + } +} +``` + +结果渲染为 + +```html +
+``` + +### 三元表达式 + +```html +
+
+``` + +### 数组 + +```html +
+``` + +### 数组语法 + +```html +
+
+``` + +如下 data + +```js +data: { + activeClass: 'active', + errorClass: 'text-danger' +} +``` + +结果渲染为 + +```html +
+``` + +### 内联样式 + +```html +
+``` + +如下 data + +```js +data: { + activeColor: 'red', + fontSize: 30 +} +``` + +结果渲染为 + +```html +
+``` + +### 内联样式对象通常更好 + +```html +
+``` + +如下 data + +```js +data: { + styleObject: { + color: 'red', + fontSize: '13px' + } +} +``` + +同样的，对象语法常常结合返回对象的计算属性使用 + +### 内联样式数组语法 + +```html +
+``` + +### 内联样式多重值 + +```html +
+``` + +条件渲染 +--- + +### v-if + +```html +

Vue is awesome!

+

Oh no 😢

+``` + +### v-else-if + + +```html +
A
+
B
+
C
+
+ Not A/B/C +
+``` + +`@2.1.0` 新增，必须紧跟在带 `v-if` 或者 `v-else-if` 的元素之后 + +### v-else + + +```html +
+ 现在你看到我了 +
+
+ 现在你看不见我了 +
+``` + +`v-else` 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面 + +### \