From aa31df0a0bbfaad99f2814b2fec1617d893b5597 Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Mon, 10 Oct 2022 15:17:08 +0000 Subject: [PATCH] feat: add `vue2.md` cheatsheet. 9168e56f39eb35ac1dfb4ec019a69dfc1d24f72b --- docs/find.html | 4 +- docs/vue2.html | 389 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 7 +- 3 files changed, 397 insertions(+), 3 deletions(-) create mode 100644 docs/vue2.html diff --git a/docs/find.html b/docs/find.html index 3fb4c734..5742e9d6 100644 --- a/docs/find.html +++ b/docs/find.html @@ -5,7 +5,7 @@ Find 备忘清单 & find cheatsheet & Quick Reference - + @@ -35,7 +35,7 @@ localStorage.setItem(LOCAL_NANE, mode); }

Find 备忘清单

-

这是 Linux find 命令备忘单的快速参考列表，包含常用选项和示例。

+

这是 Linux find 命令备忘清单的快速参考列表，包含常用选项和示例。

入门

用法

$ find [path...] [options] [expression]
diff --git a/docs/vue2.html b/docs/vue2.html
new file mode 100644
index 00000000..f70e4605
--- /dev/null
+++ b/docs/vue2.html
@@ -0,0 +1,389 @@
+
+
+
+
+Vue2 备忘清单
+ &  vue2 cheatsheet &  Quick Reference
+
+
+
+
+
+
+
Vue2 备忘清单

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

+
入门

+
介绍

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

+
+
声明式渲染

+
<div id="app">
+  {{ message }}
+</div>
+

+
var app = new Vue({
+  el: '#app',
+  data: {
+    message: 'Hello Vue!'
+  }
+})
+

+
基础例子

+
+
<div id="example">
+  <p>原始信息: "{{ message }}"</p>
+  <p>
+    计算的反向信息: "{{ reversedMessage }}"
+  </p>
+</div>
+

+
var vm = new Vue({
+  el: '#example',
+  data: {
+    message: 'Hello'
+  },
+  computed: {
+    // 计算属性的 getter
+    reversedMessage: function () {
+      // `this` 指向 vm 实例
+      return this.message.split('')
+          .reverse().join('')
+    }
+  }
+})
+

+
结果

+
原始信息:  "Hello"
+计算的反向信息:  "olleH"
+

+
绑定元素属性

+
<div id="app-2">
+  <span v-bind:title="message">
+    鼠标悬停几秒钟查看此处动态绑定的提示信息！
+  </span>
+</div>
+

+
var app2 = new Vue({
+  el: '#app-2',
+  data: {
+    message: '页面加载于 ' + new Date()
+        .toLocaleString()
+  }
+})
+

+
条件

+
<div id="app-3">
+  <p v-if="seen">现在你看到我了</p>
+</div>
+

+
var app3 = new Vue({
+  el: '#app-3',
+  data: {
+    seen: true
+  }
+})
+

+
控制切换一个元素是否显示

+
循环

+
<div id="app-4">
+  <ol>
+    <li v-for="todo in todos">
+      {{ todo.text }}
+    </li>
+  </ol>
+</div>
+

+
var app4 = new Vue({
+  el: '#app-4',
+  data: {
+    todos: [
+      { text: '学习 JavaScript' },
+      { text: '学习 Vue' },
+      { text: '整个牛项目' }
+    ]
+  }
+})
+

+
点击事件处理

+
<div id="app-5">
+  <p>{{ message }}</p>
+  <button v-on:click="reverseMessage">
+    反转消息
+  </button>
+</div>
+

+
var app5 = new Vue({
+  el: '#app-5',
+  data: {
+    message: 'Hello Vue.js!'
+  },
+  methods: {
+    reverseMessage: function () {
+      this.message = this.message.split('')
+            .reverse().join('')
+    }
+  }
+})
+

+
输入事件处理

+
<div id="app-6">
+  <p>{{ message }}</p>
+  <input v-model="message">
+</div>
+

+
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

+
var app6 = new Vue({
+  el: '#app-6',
+  data: {
+    message: 'Hello Vue!'
+  }
+})
+

+
模板语法

+
文本

+
<span>Message: {{ msg }}</span>
+<span v-once>
+  这个将不会改变: {{ msg }}
+</span>
+

+
使用 v-once 指令，执行一次性地插值，当数据改变时，插值处的内容不会更新

+
原始 HTML

+
<p>解释为普通文本: {{ rawHtml }}</p>
+<p>
+  使用 v-html 指令: 
+  <span v-html="rawHtml"></span>
+</p>
+

+
使用 v-html 指令，输出真正的 HTML

+
属性

+
<div v-bind:id="dynamicId"></div>
+<button v-bind:disabled="isDisabled">
+  Button
+</button>
+

+
如果 isDisabled 的值是 null/undefined/false 则 disabled 不会被渲染出来

+
JavaScript 表达式

+
<div id="app">
+  <span>消息: {{ msg }}</span>
+  <span>{{ msg + '这是字符串' }}</span>
+  <span>{{ isWorking ? '是':'否' }}</span>
+  <span>{{ msg.getDetials() }}</span>
+  <div v-bind:id="'list-' + id"></div>
+<div>
+

+
指令

+
<p v-if="seen">
+  现在你看到我了
+</p>
+

+
v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素

+
指令参数

+
<a v-bind:href="url">...</a>
+

+
v-bind 指令将该元素 href 属性与表达式 url 的值绑定

+
<a v-on:click="doSomething">...</a>
+

+
v-on 指令，用于监听 DOM 事件，oSomething 是事件名

+
指令动态参数 v2.6

+
<a v-on:[eventName]="doSomething">...</a>
+

+
当 eventName 的值为 focus 时，v-on:[eventName] 将等价于 v-on:focus

+
指令修饰符

+
<form v-on:submit.prevent="onSubmit">
+  ...
+</form>
+

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

+
指令缩写

+
<!-- 完整语法 -->
+<a v-bind:href="url">...</a>
+<!-- 缩写 -->
+<a :href="url">...</a>
+<!-- 动态参数的缩写 (2.6.0+) -->
+<a :[key]="url"> ... </a>
+

+
Class 与 Style 绑定

+
对象语法

+
<div v-bind:class="{ active: isActive }">
+
+</div>
+

+
传给 v-bind:class 一个对象，以动态地切换 class

+
与普通的 class 属性共存

+
+
<div
+  class="static"
+  v-bind:class="{
+    active: isActive,
+    'text-danger': hasError
+  }"
+></div>
+

+
如下 data

+
data: {
+  isActive: true,
+  hasError: false
+}
+

+
结果渲染为

+
<div class="static active"></div>
+

+
绑定的数据对象不必内联定义在模板里

+
+
<div v-bind:class="classObject"></div>
+

+
如下 data

+
data: {
+  classObject: {
+    active: true,
+    'text-danger': false
+  }
+}
+

+
结果渲染为

+
<div class="static active"></div>
+

+
三元表达式

+
<div v-bind:class="[
+  isActive ? activeClass : ''
+]">
+</div>
+

+
数组

+
<div v-bind:class="[
+  { active: isActive }, errorClass
+]"></div>
+

+
数组语法

+
<div v-bind:class="[
+  activeClass, errorClass
+]">
+</div>
+

+
如下 data

+
data: {
+  activeClass: 'active',
+  errorClass: 'text-danger'
+}
+

+
结果渲染为

+
<div class="active text-danger"></div>
+

+
内联样式

+
<div v-bind:style="{
+    color: activeColor,
+    fontSize: fontSize + 'px'
+}"></div>
+

+
如下 data

+
data: {
+  activeColor: 'red',
+  fontSize: 30
+}
+

+
结果渲染为

+
<div style="color: red; font-size: 30px;"></div>
+

+
内联样式对象通常更好

+
<div v-bind:style="styleObject"></div>
+

+
如下 data

+
data: {
+  styleObject: {
+    color: 'red',
+    fontSize: '13px'
+  }
+}
+

+
同样的，对象语法常常结合返回对象的计算属性使用

+
内联样式数组语法

+
<div v-bind:style="[
+  baseStyles, overridingStyles
+]"></div>
+

+
内联样式多重值

+
<div :style="{
+  display: ['-webkit-box', 'flex']
+}"></div>
+

+
条件渲染

+
v-if

+
<h1 v-if="awesome">Vue is awesome!</h1>
+<h1 v-else>Oh no 😢</h1>
+

+
v-else-if

+
+
<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

+
+
<div v-if="Math.random() > 0.5">
+  现在你看到我了
+</div>
+<div v-else>
+  现在你看不见我了
+</div>
+

+
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面

+
<template> 上使用 v-if 条件渲染分组

+
<template v-if="ok">
+  <p>Paragraph 1</p>
+</template>
+

+
用 key 管理可复用的元素

+
+
<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

+
<h1 v-show="ok">
+  Hello!
+</h1>
+

+
带有 v-show 的元素始终会被渲染并保留在 DOM 中，只是简单地切换元素的 CSS 属性 display

+
另见

+
+
© 2022 Kenny Wang, All rights reserved.

+
diff --git a/index.html b/index.html
index accfea0d..bb88645b 100644
--- a/index.html
+++ b/index.html
@@ -90,6 +90,11 @@
   
 
 TypeScript
+
+  
+  
+
+Vue 2
 
   
   
@@ -195,7 +200,7 @@

看到缺少什么了吗？

上面的列表没有看到你想要的？ 您是否正在寻找一些备忘清单或参考资料，或者您有一些片段备忘清单要分享，这是一个最好的机会！

-

请求添加备忘单 +

请求添加备忘单 我有一张备忘单