From 38003a0d1804ce144c03a988c0647f52cae5bda9 Mon Sep 17 00:00:00 2001
From: xiaoyou <2232705454@qq.com>
Date: Wed, 2 Jun 2021 16:05:02 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2021-06-02-vue.md"                        | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-02-vue.md"

diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-02-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-02-vue.md"
new file mode 100644
index 0000000..045e088
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-02-vue.md"
@@ -0,0 +1,51 @@
+# 列表渲染笔记
+
+```
+<div id="app">
+    <div v-for="(item,index) of list" :key="index">
+        {{item}} ---- {{index}}
+    </div>
+</div>
+let vm = new Vue({
+    el: '#app',
+    data: {
+        list: [
+            "hello","Dell","nice","to","meet","you"
+        ]
+    }
+})
+```
+
++ 一般为了提升性能会设置一个唯一的key值
++ 推荐不要用index做key值，因为在操作dom节点是比较费性能，可以给每个数据给一个唯一的id，用这个唯一的id做key值。
+
+### 维护状态
+
+当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略如
+
+果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就
+
+地更新每个元素，并且确保它们在每个索引位置正确渲染。
+
+
++ 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
+
+
+
+### 数据的更新检测
+1. 变更方法
+```
+push() 在尾部添加数据
+pop()  删除尾部数据
+shift()在头部添加数据
+unshift() 删除头部数据
+splice() 改数组万能方法
+sort() 对数组排序
+reverse() 移除元素
+```
+
+2. 替换数组
+
++ filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
+
+
-- 
Gitee


From a6b9b95b5c21a4c7ca78c19f8a48c63315b173d0 Mon Sep 17 00:00:00 2001
From: xiaoyou <2232705454@qq.com>
Date: Fri, 4 Jun 2021 10:58:41 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E5=92=8C=E4=B8=80=E4=BA=9B=E4=BF=AE=E9=A5=B0=E7=AC=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2021-06-04-vue.md"                        | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 "\346\270\270\346\265\267\346\236\227/2021-06-04-vue.md"

diff --git "a/\346\270\270\346\265\267\346\236\227/2021-06-04-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-06-04-vue.md"
new file mode 100644
index 0000000..cc6c2f3
--- /dev/null
+++ "b/\346\270\270\346\265\267\346\236\227/2021-06-04-vue.md"
@@ -0,0 +1,113 @@
+# 事件处理
+
+### 事件处理方法
+
+1. 格式
+
++ 完整格式：v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)"
+
+　　　　  缩写格式：@事件名="函数名" 或 @事件名="函数名(参数……)"
+
+　　　　 注意：@后面没有冒号
+
++ event ：函数中的默认形参，代表原生 DOM 事件
+
+　　　　  当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入作用：用于监听 DOM 事件
+
+
+```
+<div id="app">
+    
+    <!-- `greet` 是在下面定义的方法名 -->
+    <button v-on:click="greet">无参数事件</button>
+    <button v-on:click="greet2('hellogreet2')">有参数事件</button>
+    <button v-on:click="greet3">无参数event</button>
+    <button v-on:click="greet4('hello',$event)">有参数event</button>
+
+</div>
+```
+
+```
+<script>
+
+  var vm = new Vue({
+      el: '#app',
+      data: {},
+
+      // 在 `methods` 对象中定义方法
+      methods: {
+
+        greet: function () {
+          alert("无参数")
+        },
+
+        greet2: function (arg) {
+          console.log(arg)
+          alert(arg)
+        },
+
+        // `event` 是默认原生 DOM 事件
+        greet3: function (event) {
+          console.log(event.target.tagName)
+          console.log(event.target.innerHTML)
+
+        },
+        // `event` 是默认原生 DOM 事件，如果有多个参数，event要以$event传入
+        greet4: function (arg, event) {
+          console.log(arg)
+          console.log(event.target.tagName)
+          console.log(event.target.innerHTML)
+        }
+
+      }
+
+    }
+  )
+
+
+</script>
+```
+2. .stop  阻止单击事件继续传播  event.stopPropagation()
+
+3. .prevent  阻止事件默认行为  event.preventDefault()
+
+4. .once  点击事件将只会触发一次
+
+5. .self只会触发自己范围内的事件，不会包含子元素
+
+
+
+### 按键修饰符
+
+1. 格式
+
+格式：v-on:keyup.按键名 或 @keyup.按键名
+
+常用按键名：
+
+```
+.enter
+.tab
+.delete (捕获“删除”和“退格”键)
+.esc
+.space
+.up
+.down
+.left
+.right
+```
+
+
+### 鼠标修饰符
+
+1. 使用方式
+```
+.left
+.right
+.middle
+这些修饰符会限制处理函数仅响应特定的鼠标按钮。
+
+@click.left="事件名"   点击鼠标左键触发事件
+@click.right="事件名"  点击鼠标右键触发事件
+@click.middle="事件名" 点击鼠标滚轮触发事件
+```
\ No newline at end of file
-- 
Gitee