diff --git "a/\351\273\204\345\213\207\350\276\211/Note-2021-6-2.md" "b/\351\273\204\345\213\207\350\276\211/Note-2021-6-2.md"
new file mode 100644
index 0000000000000000000000000000000000000000..981761203d401039889c663cf604f3b1b3043e5d
--- /dev/null
+++ "b/\351\273\204\345\213\207\350\276\211/Note-2021-6-2.md"
@@ -0,0 +1,29 @@
+## 今日笔记
+
+## 列表渲染
+用 v-for 把一个数组对应为一组元素用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
+<ul id="example-1">
+  <li v-for="item in items" :key="item.message">
+    {{ item.message }}
+  </li>
+</ul>
+var example1 = new Vue({
+  el: '#example-1',
+  data: {
+    items: [
+      { message: 'Foo' },
+      { message: 'Bar' }
+    ]
+  }
+})
+结果：·Foo
+      ·Bar
+
+## 替换数组
+      变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
+
+example1.items = example1.items.filter(function (item) {
+  return item.message.match(/Foo/)
+})
+你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
+
diff --git "a/\351\273\204\345\213\207\350\276\211/Note-2021-6-4.md" "b/\351\273\204\345\213\207\350\276\211/Note-2021-6-4.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4020d53b0ccb410fe76ed1feb9e050c1a19a442d
--- /dev/null
+++ "b/\351\273\204\345\213\207\350\276\211/Note-2021-6-4.md"
@@ -0,0 +1,155 @@
+## 今日笔记
+
+## 事件处理
+1.监听事件
+用 v-on 指令监听 DOM 事件
+<div id="example-1">
+  <button v-on:click="counter += 1">Add 1</button>
+  <p>The button above has been clicked {{ counter }} times.</p>
+</div>
+var example1 = new Vue({
+  el: '#example-1',
+  data: {
+    counter: 0
+  }
+})
+结果：add1;
+
+## 事件处理方法
+
+<div id="example-2">
+  <!-- `greet` 是在下面定义的方法名 -->
+  <button v-on:click="greet">Greet</button>
+</div>
+var example2 = new Vue({
+  el: '#example-2',
+  data: {
+    name: 'Vue.js'
+  },
+  // 在 `methods` 对象中定义方法
+  methods: {
+    greet: function (event) {
+      // `this` 在方法里指向当前 Vue 实例
+      alert('Hello ' + this.name + '!')
+      // `event` 是原生 DOM 事件
+      if (event) {
+        alert(event.target.tagName)
+      }
+    }
+  }
+})
+
+// 也可以用 JavaScript 直接调用方法
+example2.greet() // => 'Hello Vue.js!'
+
+结果：hello,Vue.js
+
+
+## 事件修饰符
+
+在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
+修饰符是由点开头的指令后缀来表示的。
+.stop 不会一直传递，自己运行结束就结束了。就是js中的event.stopPropagation()的缩写,它是用来阻止冒泡的
+
+.prevent比如 submit 加了这个，就不会提交.了就是js中event.preventDefault()的缩写,它是用来阻止默认行为的；
+
+.capture在传递的父子事件种，加了这个，无论先点哪个，都先执行这个。捕获事件和冒泡事件(默认)是两种事件流,事件捕获是从document到触发事件的那个元素;冒泡事件是从下向上的触发事件；
+
+.self只有点击自己本身才会执行，点他的子元素也不会被传递。就是防止父元素（设置了该修饰符）的子元素的事件冒泡到父元素上，只有本身触发时才会执行事件处理程序（函数）；
+
+.once 只执行一次每次页面重载后只会执行一次。
+
+.passive
+
+<!-- 阻止单击事件冒泡 -->
+<a v-on:click.stop="doThis"></a>
+<!-- 提交事件不再重载页面 -->
+<form v-on:submit.prevent="onSubmit"></form>
+<!-- 修饰符可以串联  -->
+<a v-on:click.stop.prevent="doThat"></a>
+<!-- 只有修饰符 -->
+<form v-on:submit.prevent></form>
+<!-- 添加事件侦听器时使用事件捕获模式 -->
+<div v-on:click.capture="doThis">...</div>
+<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
+<div v-on:click.self="doThat">...</div>
+
+<!-- click 事件只能点击一次，2.1.4版本新增 -->
+<a v-on:click.once="doThis"></a>
+
+
+## 按键修饰符
+Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
+
+<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
+<input v-on:keyup.13="submit">
+记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
+
+<!-- 同上 -->
+<input v-on:keyup.enter="submit">
+<!-- 缩写语法 -->
+<input @keyup.enter="submit">
+全部的按键别名：
+
+.enter
+
+.tab
+
+.delete (捕获 "删除" 和 "退格" 键)
+
+.esc
+
+.space
+
+.up
+
+.down
+
+.left
+
+.right
+
+.ctrl
+
+.alt
+
+.shift
+
+.meta
+## 实例
+<p><!-- Alt + C -->
+<input @keyup.alt.67="clear">
+<!-- Ctrl + Click -->
+<div @click.ctrl="doSomething">Do something</div>
+
+## 系统修饰键
+可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器
+·.ctrl
+·.alt
+·.shift
+·.meta
+
+# .exact 修饰符
+2.5.0 新增
+
+.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
+
+<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
+<button v-on:click.ctrl="onClick">A</button>
+
+<!-- 有且只有 Ctrl 被按下的时候才触发 -->
+<button v-on:click.ctrl.exact="onCtrlClick">A</button>
+
+<!-- 没有任何系统修饰符被按下的时候才触发 -->
+<button v-on:click.exact="onClick">A</button>
+
+## 鼠标按钮修饰符
+
+.left
+.right
+.middle
+
+#  为什么在 HTML 中监听事件？
+1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
+2.为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
+3.一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
\ No newline at end of file
diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-6-2 14-39-43.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-6-2 14-39-43.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..8e06c67c8481d55e5b5300b2712a19fdc9b14b29
Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-6-2 14-39-43.JPG" differ
diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-31-13.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-31-13.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..eca1aae27e3a1959d0661a62500aa9dd32d05fa4
Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-31-13.JPG" differ
diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-31-17.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-31-17.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..52cf912a40d07381dd65f2182881d397306856ae
Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-31-17.JPG" differ
diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-32-28.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-32-28.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..6844b201265554011935cce3cb2cc6fe38445a86
Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-32-28.JPG" differ
diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-35-32.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-35-32.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..d399591c9003cfbbb7a846817d1c7b04d6b98afe
Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-6-2 15-35-32.JPG" differ
diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-6-4 9-15-47.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-6-4 9-15-47.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..12e897fb2048ff56b79ca06a4577c91c8dcf1c37
Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-6-4 9-15-47.JPG" differ
diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-6-4 9-21-34.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-6-4 9-21-34.JPG"
new file mode 100644
index 0000000000000000000000000000000000000000..387fc43fe60245820e88fb27b70041c04ad6289e
Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-6-4 9-21-34.JPG" differ