feat: add vue2.md cheatsheet.
This commit is contained in:
jaywcjlove
parent
32f0936c36
commit
9168e56f39
@ -25,6 +25,7 @@ Quick Reference
|
||||
[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
|
||||
[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
|
||||
[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
|
||||
[Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
|
||||
[YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
|
||||
<!--rehype:class=home-card-->
|
||||
|
||||
@ -69,7 +70,7 @@ Quick Reference
|
||||
|
||||
上面的列表没有看到你想要的？ 您是否正在寻找一些备忘清单或参考资料，或者您有一些片段备忘清单要分享，这是一个最好的机会！
|
||||
|
||||
[`请求添加备忘单`](https://github.com/jaywcjlove/reference/issues/new?title=备忘清单+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove)<!--rehype:class=home-button&style=margin-top:2rem&target=__blank-->
|
||||
[`请求添加备忘单`](https://github.com/jaywcjlove/reference/issues/new?title=【备忘清单】+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove)<!--rehype:class=home-button&style=margin-top:2rem&target=__blank-->
|
||||
[`我有一张备忘单`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)<!--rehype:class=home-button text-grey&target=__blank-->
|
||||
<!--rehype:style=margin-top:3rem-->
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
Find 备忘清单
|
||||
===
|
||||
|
||||
这是 Linux find 命令备忘单的快速参考列表，包含常用选项和示例。
|
||||
这是 Linux find 命令备忘清单的快速参考列表，包含常用选项和示例。
|
||||
|
||||
入门
|
||||
----
|
||||
|
||||
520
docs/vue2.md
Normal file
520
docs/vue2.md
Normal file
@ -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
|
||||
<div id="app">
|
||||
{{ message }}
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
message: 'Hello Vue!'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 基础例子
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```html
|
||||
<div id="example">
|
||||
<p>原始信息: "{{ message }}"</p>
|
||||
<p>
|
||||
计算的反向信息: "{{ reversedMessage }}"
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
```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
|
||||
<div id="app-2">
|
||||
<span v-bind:title="message">
|
||||
鼠标悬停几秒钟查看此处动态绑定的提示信息！
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
var app2 = new Vue({
|
||||
el: '#app-2',
|
||||
data: {
|
||||
message: '页面加载于 ' + new Date()
|
||||
.toLocaleString()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 条件
|
||||
|
||||
```html
|
||||
<div id="app-3">
|
||||
<p v-if="seen">现在你看到我了</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
var app3 = new Vue({
|
||||
el: '#app-3',
|
||||
data: {
|
||||
seen: true
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
控制切换一个元素是否显示
|
||||
|
||||
### 循环
|
||||
|
||||
```html
|
||||
<div id="app-4">
|
||||
<ol>
|
||||
<li v-for="todo in todos">
|
||||
{{ todo.text }}
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
var app4 = new Vue({
|
||||
el: '#app-4',
|
||||
data: {
|
||||
todos: [
|
||||
{ text: '学习 JavaScript' },
|
||||
{ text: '学习 Vue' },
|
||||
{ text: '整个牛项目' }
|
||||
]
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 点击事件处理
|
||||
|
||||
```html
|
||||
<div id="app-5">
|
||||
<p>{{ message }}</p>
|
||||
<button v-on:click="reverseMessage">
|
||||
反转消息
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
var app5 = new Vue({
|
||||
el: '#app-5',
|
||||
data: {
|
||||
message: 'Hello Vue.js!'
|
||||
},
|
||||
methods: {
|
||||
reverseMessage: function () {
|
||||
this.message = this.message.split('')
|
||||
.reverse().join('')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 输入事件处理
|
||||
|
||||
```html
|
||||
<div id="app-6">
|
||||
<p>{{ message }}</p>
|
||||
<input v-model="message">
|
||||
</div>
|
||||
```
|
||||
|
||||
`v-model` 指令，它能轻松实现表单输入和应用状态之间的双向绑定
|
||||
|
||||
```js
|
||||
var app6 = new Vue({
|
||||
el: '#app-6',
|
||||
data: {
|
||||
message: 'Hello Vue!'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
模板语法
|
||||
---
|
||||
|
||||
### 文本
|
||||
|
||||
```html
|
||||
<span>Message: {{ msg }}</span>
|
||||
<span v-once>
|
||||
这个将不会改变: {{ msg }}
|
||||
</span>
|
||||
```
|
||||
|
||||
使用 `v-once` 指令，执行一次性地插值，当数据改变时，插值处的内容不会更新
|
||||
|
||||
### 原始 HTML
|
||||
|
||||
```html
|
||||
<p>解释为普通文本: {{ rawHtml }}</p>
|
||||
<p>
|
||||
使用 v-html 指令:
|
||||
<span v-html="rawHtml"></span>
|
||||
</p>
|
||||
```
|
||||
|
||||
使用 `v-html` 指令，输出真正的 `HTML`
|
||||
|
||||
### 属性
|
||||
|
||||
```html
|
||||
<div v-bind:id="dynamicId"></div>
|
||||
<button v-bind:disabled="isDisabled">
|
||||
Button
|
||||
</button>
|
||||
```
|
||||
|
||||
如果 `isDisabled` 的值是 null/undefined/false 则 `disabled` 不会被渲染出来
|
||||
|
||||
### JavaScript 表达式
|
||||
|
||||
```html
|
||||
<div id="app">
|
||||
<span>消息: {{ msg }}</span>
|
||||
<span>{{ msg + '这是字符串' }}</span>
|
||||
<span>{{ isWorking ? '是':'否' }}</span>
|
||||
<span>{{ msg.getDetials() }}</span>
|
||||
<div v-bind:id="'list-' + id"></div>
|
||||
<div>
|
||||
```
|
||||
|
||||
### 指令
|
||||
|
||||
```html
|
||||
<p v-if="seen">
|
||||
现在你看到我了
|
||||
</p>
|
||||
```
|
||||
|
||||
`v-if` 指令将根据表达式 `seen` 的值的真假来插入/移除 \<p> 元素
|
||||
|
||||
### 指令参数
|
||||
|
||||
```html
|
||||
<a v-bind:href="url">...</a>
|
||||
```
|
||||
|
||||
`v-bind` 指令将该元素 `href` 属性与表达式 `url` 的值绑定
|
||||
|
||||
```html
|
||||
<a v-on:click="doSomething">...</a>
|
||||
```
|
||||
|
||||
`v-on` 指令，用于监听 DOM 事件，oSomething 是事件名
|
||||
|
||||
### 指令动态参数 **v2.6**
|
||||
|
||||
```html
|
||||
<a v-on:[eventName]="doSomething">...</a>
|
||||
```
|
||||
|
||||
当 `eventName` 的值为 `focus` 时，`v-on:[eventName]` 将等价于 `v-on:focus`
|
||||
|
||||
### 指令修饰符
|
||||
|
||||
```html
|
||||
<form v-on:submit.prevent="onSubmit">
|
||||
...
|
||||
</form>
|
||||
```
|
||||
|
||||
`.prevent` 修饰符告诉 `v-on` 指令对于触发的事件调用 `event.preventDefault()`
|
||||
|
||||
### 指令缩写
|
||||
|
||||
```html
|
||||
<!-- 完整语法 -->
|
||||
<a v-bind:href="url">...</a>
|
||||
<!-- 缩写 -->
|
||||
<a :href="url">...</a>
|
||||
<!-- 动态参数的缩写 (2.6.0+) -->
|
||||
<a :[key]="url"> ... </a>
|
||||
```
|
||||
|
||||
Class 与 Style 绑定
|
||||
---
|
||||
|
||||
### 对象语法
|
||||
|
||||
```html
|
||||
<div v-bind:class="{ active: isActive }">
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
传给 `v-bind:class` 一个对象，以动态地切换 `class`
|
||||
|
||||
### 与普通的 class 属性共存
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
```html {2}
|
||||
<div
|
||||
class="static"
|
||||
v-bind:class="{
|
||||
active: isActive,
|
||||
'text-danger': hasError
|
||||
}"
|
||||
></div>
|
||||
```
|
||||
|
||||
如下 data
|
||||
|
||||
```js
|
||||
data: {
|
||||
isActive: true,
|
||||
hasError: false
|
||||
}
|
||||
```
|
||||
|
||||
结果渲染为
|
||||
|
||||
```html
|
||||
<div class="static active"></div>
|
||||
```
|
||||
|
||||
### 绑定的数据对象不必内联定义在模板里
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
```html
|
||||
<div v-bind:class="classObject"></div>
|
||||
```
|
||||
|
||||
如下 data
|
||||
|
||||
```js
|
||||
data: {
|
||||
classObject: {
|
||||
active: true,
|
||||
'text-danger': false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
结果渲染为
|
||||
|
||||
```html
|
||||
<div class="static active"></div>
|
||||
```
|
||||
|
||||
### 三元表达式
|
||||
|
||||
```html
|
||||
<div v-bind:class="[
|
||||
isActive ? activeClass : ''
|
||||
]">
|
||||
</div>
|
||||
```
|
||||
|
||||
### 数组
|
||||
|
||||
```html
|
||||
<div v-bind:class="[
|
||||
{ active: isActive }, errorClass
|
||||
]"></div>
|
||||
```
|
||||
|
||||
### 数组语法
|
||||
|
||||
```html
|
||||
<div v-bind:class="[
|
||||
activeClass, errorClass
|
||||
]">
|
||||
</div>
|
||||
```
|
||||
|
||||
如下 data
|
||||
|
||||
```js
|
||||
data: {
|
||||
activeClass: 'active',
|
||||
errorClass: 'text-danger'
|
||||
}
|
||||
```
|
||||
|
||||
结果渲染为
|
||||
|
||||
```html
|
||||
<div class="active text-danger"></div>
|
||||
```
|
||||
|
||||
### 内联样式
|
||||
|
||||
```html
|
||||
<div v-bind:style="{
|
||||
color: activeColor,
|
||||
fontSize: fontSize + 'px'
|
||||
}"></div>
|
||||
```
|
||||
|
||||
如下 data
|
||||
|
||||
```js
|
||||
data: {
|
||||
activeColor: 'red',
|
||||
fontSize: 30
|
||||
}
|
||||
```
|
||||
|
||||
结果渲染为
|
||||
|
||||
```html
|
||||
<div style="color: red; font-size: 30px;"></div>
|
||||
```
|
||||
|
||||
### 内联样式对象通常更好
|
||||
|
||||
```html
|
||||
<div v-bind:style="styleObject"></div>
|
||||
```
|
||||
|
||||
如下 data
|
||||
|
||||
```js
|
||||
data: {
|
||||
styleObject: {
|
||||
color: 'red',
|
||||
fontSize: '13px'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
同样的，对象语法常常结合返回对象的计算属性使用
|
||||
|
||||
### 内联样式数组语法
|
||||
|
||||
```html
|
||||
<div v-bind:style="[
|
||||
baseStyles, overridingStyles
|
||||
]"></div>
|
||||
```
|
||||
|
||||
### 内联样式多重值
|
||||
|
||||
```html
|
||||
<div :style="{
|
||||
display: ['-webkit-box', 'flex']
|
||||
}"></div>
|
||||
```
|
||||
|
||||
条件渲染
|
||||
---
|
||||
|
||||
### v-if
|
||||
|
||||
```html
|
||||
<h1 v-if="awesome">Vue is awesome!</h1>
|
||||
<h1 v-else>Oh no 😢</h1>
|
||||
```
|
||||
|
||||
### v-else-if
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```html
|
||||
<div v-if="type === 'A'">A</div>
|
||||
<div v-else-if="type === 'B'">B</div>
|
||||
<div v-else-if="type === 'C'">C</div>
|
||||
<div v-else>
|
||||
Not A/B/C
|
||||
</div>
|
||||
```
|
||||
|
||||
`@2.1.0` 新增，必须紧跟在带 `v-if` 或者 `v-else-if` 的元素之后
|
||||
|
||||
### v-else
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```html
|
||||
<div v-if="Math.random() > 0.5">
|
||||
现在你看到我了
|
||||
</div>
|
||||
<div v-else>
|
||||
现在你看不见我了
|
||||
</div>
|
||||
```
|
||||
|
||||
`v-else` 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面
|
||||
|
||||
### \<template> 上使用 v-if 条件渲染分组
|
||||
|
||||
```html
|
||||
<template v-if="ok">
|
||||
<p>Paragraph 1</p>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 用 key 管理可复用的元素
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```html
|
||||
<template v-if="loginType === 'username'">
|
||||
<label>Username</label>
|
||||
<input placeholder="输入用户名" key="username-input">
|
||||
</template>
|
||||
<template v-else>
|
||||
<label>Email</label>
|
||||
<input placeholder="输入邮箱" key="email-input">
|
||||
</template>
|
||||
```
|
||||
|
||||
### v-show
|
||||
|
||||
```html
|
||||
<h1 v-show="ok">
|
||||
Hello!
|
||||
</h1>
|
||||
```
|
||||
|
||||
带有 `v-show` 的元素始终会被渲染并保留在 DOM 中，只是简单地切换元素的 `CSS` 属性 `display`
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
- [Vue Essentials Cheat-Sheet.pdf](https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf) _(vuemastery.com)_
|
||||
- [Vue 2 官方文档](https://v2.cn.vuejs.org/) _(vuejs.org)_
|
||||
4
scripts/assets/vue2.svg
Normal file
4
scripts/assets/vue2.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" height="1em" width="1em">
|
||||
<path d="m12 12.765 5.592-9.437h-3.276L12 7.33v.002L9.688 3.328h-3.28z"/>
|
||||
<path d="M18.461 3.332 12 14.235 5.539 3.332H1.992L12 20.672l10.008-17.34z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 269 B |
Loading…
x
Reference in New Issue
Block a user