diff --git "a/\350\256\270\346\242\246\345\251\267/2021-5-25.md" "b/\350\256\270\346\242\246\345\251\267/2021-5-25.md" index d92862ad3b7d038bbd650190949f1e5623a25cf9..534a9ef319998c6725e9d4c9f31771c07a721ed6 100644 --- "a/\350\256\270\346\242\246\345\251\267/2021-5-25.md" +++ "b/\350\256\270\346\242\246\345\251\267/2021-5-25.md" @@ -1,6 +1,6 @@ 今日份课堂笔记 -2021-5-25 星期二 天气阴 +2021-5-25 星期二 diff --git "a/\350\256\270\346\242\246\345\251\267/2021-5-26.md" "b/\350\256\270\346\242\246\345\251\267/2021-5-26.md" index 77d2f3fc011fa37417b1d2ade822afc26ab067e3..1e28cc25648fac19c88319e50bbb4704bb4ea8c6 100644 --- "a/\350\256\270\346\242\246\345\251\267/2021-5-26.md" +++ "b/\350\256\270\346\242\246\345\251\267/2021-5-26.md" @@ -1,6 +1,6 @@ 今日份课堂笔记 -2021-5-26 星期三 天气晴 +2021-5-26 星期三 一.条件与循环 1.控制切换一个元素是否显示： diff --git "a/\350\256\270\346\242\246\345\251\267/2021-6-2.md" "b/\350\256\270\346\242\246\345\251\267/2021-6-2.md" new file mode 100644 index 0000000000000000000000000000000000000000..a5a581d003e4afe8107a3e57868e658a679d9c29 --- /dev/null +++ "b/\350\256\270\346\242\246\345\251\267/2021-6-2.md" @@ -0,0 +1,175 @@ +今日份课堂笔记 + +2021-6-2 星期三 + +一.列表渲染 + +``` +用 v-for 指令基于一个数组来渲染一个列表 +v-for 指令需要使用 item in items 形式的特殊语法 +其中 items 是源数据数组 +而 item 则是被迭代的数组元素的别名。 + + + + + +``` +结果： + +![avater](./imgs/2021-6-2-001.PNG) + +2.在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。 +``` + + + + +``` +结果： +![avater](./imgs/2021-6-2-002.PNG) + +你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法： +``` +
+``` +3.用 v-for 来遍历一个对象的 property。 +``` + + + + + + + + +结果为： +1 +小明 +20 +一米八 +``` +二.用自己的方式实现这个功能 +![avater](./imgs/2021-6-2-003.PNG) +``` +
+ + + +
+ + + + + +``` diff --git "a/\350\256\270\346\242\246\345\251\267/2021-6-3.md" "b/\350\256\270\346\242\246\345\251\267/2021-6-3.md" new file mode 100644 index 0000000000000000000000000000000000000000..862e96863ab1938e01a47e8678e34db740038e78 --- /dev/null +++ "b/\350\256\270\346\242\246\345\251\267/2021-6-3.md" @@ -0,0 +1,130 @@ +今日份课堂笔记 + +2021-6-3 星期四 + +一.事件处理 + +1.监听事件（用v-on指令监听事件） +``` +
+ +

这是你第{{counter}}次点我

+
+ + +``` +2.事件处理方法（当处理事件复杂时可以让V-on接受一个调用方法名称，在方法中实现想要的效果） +``` +
+ + +
+ + +``` +3.内联处理器中的方法(除了直接绑定一个方法，也可以在内联js语句中调用方法) +``` +
+ + +
+ + +``` +4.事件修饰符 +``` +.stop(阻止事件传播,只运行v-on当前绑定的事件) + + +.prevent（提交事件不再重载页面） +
+ +.capture（修饰符可以串联） + + +.self（只有修饰符） + + +.once（添加事件监听器时使用事件捕获模式 ，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 ） +
...
+ +.passive（ 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的） +
...
+``` +5.按键修饰符 +``` +.enter +.tab +.delete (捕获“删除”和“退格”键) +.esc +.space +.up +.down +.left +.right + +下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 +.ctrl +.alt +.shift +.meta +``` + +例子： +``` + +
+
+ +
+
+ + +``` \ No newline at end of file diff --git "a/\350\256\270\346\242\246\345\251\267/imgs/2021-6-2-001.PNG" "b/\350\256\270\346\242\246\345\251\267/imgs/2021-6-2-001.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..7c2d96946eb80f1f56afe78abe6cf5a5f1621949 Binary files /dev/null and "b/\350\256\270\346\242\246\345\251\267/imgs/2021-6-2-001.PNG" differ diff --git "a/\350\256\270\346\242\246\345\251\267/imgs/2021-6-2-002.PNG" "b/\350\256\270\346\242\246\345\251\267/imgs/2021-6-2-002.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..6898903d0a448ef8a02733561de517b7159cb47e Binary files /dev/null and "b/\350\256\270\346\242\246\345\251\267/imgs/2021-6-2-002.PNG" differ diff --git "a/\350\256\270\346\242\246\345\251\267/imgs/2021-6-2-003.PNG" "b/\350\256\270\346\242\246\345\251\267/imgs/2021-6-2-003.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..4de18992c024188a3ac9be86b96be3f67ee3a8c5 Binary files /dev/null and "b/\350\256\270\346\242\246\345\251\267/imgs/2021-6-2-003.PNG" differ