From 49462e76788da218e69c649ff8f0e77e106686d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=AB=E9=97=AE?= <852290579@qq.com>
Date: Sun, 6 Jun 2021 21:08:00 +0800
Subject: [PATCH 1/2] =?UTF-8?q?Vue=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../note 2021-06-04.md"                       | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 "\345\260\271\345\260\221\347\232\207/note 2021-06-04.md"

diff --git "a/\345\260\271\345\260\221\347\232\207/note 2021-06-04.md" "b/\345\260\271\345\260\221\347\232\207/note 2021-06-04.md"
new file mode 100644
index 0000000..dbd8e11
--- /dev/null
+++ "b/\345\260\271\345\260\221\347\232\207/note 2021-06-04.md"	
@@ -0,0 +1,69 @@
+# 课堂笔记_07
+## Vue的学习（第七次课）
+### Vue事件处理： v-on指令监听DOM事件（可以直接处理一些简单逻辑）
+### 较为复杂的逻辑可以在Vue实例中定义方法由v-on接收
+```
+ <button @click="con+=10">攻击力+10</button>
+```
+```
+<input type="button" @click="TAL" value="金箍棒">
+```
+```
+data: {
+    number: 0,
+    con: 0,
+},
+
+TAL: function () {
+    alert('现在的天赋为' + this.number + '点')
+},
+```
+### 内联处理器中的方法
+```
+//在内联JS语句中调用方法
+<input type="button" @click="Tc('天赋可提升，提升快慢看个人悟性。。。')" value="人参果">
+
+Tc: function (item) {
+    alert(item)
+},
+
+//通过这个方法可以查看原生事件
+Event: function (event) {
+    console.log(event);
+},
+```
+### 事件修饰符：可以处理DOM事件的细节，是由点开头的指令后缀来表示的
+### 如：".stop",".prevent",".capture",".self",".once",".passive"
+### ".stop"可阻止单机事件继续传播，如下：不加".stop"修饰符则单击按钮“other”会弹出“other”和“阻止单击事件继续传播”
+### 加上".stop"则只弹出“other”
+
+```
+<div @click="warn">
+    <button @click.stop="otherwarn">other</button>
+</div>
+
+warn: function () {
+    alert('阻止单击事件继续传播');
+},
+otherwarn: function () {
+    alert('other')
+},
+```
+### ".prevent"会阻止默认行为如阻止超链接的跳转".passive"会告诉浏览器你不想阻止事件的默认行为。要把 .passive 和 .prevent 一起使用.prevent 将会被忽略
+```
+<label for="">欢迎进入</label><a href="https://cn.vuejs.org/v2/guide/events.html" @click.prevent.self="ATK">黄泉路</a>
+
+ATK: function () {
+    alert('现在的攻击力为' + this.con + '点')
+},
+```
+### 按键修饰符 按键码：".enter",".tab"单击之后按下“回车键”，“Tab建”会触发单击事件,keyup
+```
+<button @keyup.enter="Add">天赋点+1</button>
+
+Add: function () {
+    return this.number += 1
+},
+```
+### 系统修饰键 ".ctrl",".alt",".shift" 如单击事件@click.ctrl要按住Ctrl键然后单击才会触发事件
+### 按键码点后跟数字是ASCLL码转换形式
-- 
Gitee


From aac6d49d54d8bdfa5dc588fa48d775bba3979df0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=AB=E9=97=AE?= <852290579@qq.com>
Date: Sun, 6 Jun 2021 21:30:54 +0800
Subject: [PATCH 2/2] =?UTF-8?q?Vue=E8=A1=A8=E5=8D=95=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../note 2021-06-05.md"                       | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 "\345\260\271\345\260\221\347\232\207/note 2021-06-05.md"

diff --git "a/\345\260\271\345\260\221\347\232\207/note 2021-06-05.md" "b/\345\260\271\345\260\221\347\232\207/note 2021-06-05.md"
new file mode 100644
index 0000000..2c0fc1a
--- /dev/null
+++ "b/\345\260\271\345\260\221\347\232\207/note 2021-06-05.md"	
@@ -0,0 +1,64 @@
+# 课堂笔记_08
+## Vue的学习（第八次课）
+### 表单输入绑定v-model
+### v-mdoel指令在表单元素上创建双向数据绑定
+### 但是v-model会忽略表单元素的初始值总是以Vue实例的数据作为数据来源,使用v-model要在data中声明初始值
+```
+<label for="">你可能不知道自己在📕什么：</label><input type="text" value="you哟呵" v-model="da" @input="daLog" >来看看：{{da}}
+```
+```
+data:{
+    da:'默认',
+},
+methods:{
+    //input事件绑定的方法，能在网页后台控制台看到效果
+    daLog:function(){
+        console.log(this.da);
+    },
+}       
+```
+### 多选框checkbox和单选框radio，他们的表单元素初始值为checked最后通过对value的绑定来确定默认值
+```
+//循环打印：
+<div v-for="item in ace">
+    <input type="checkbox" v-model="dc" @change="chLog" :value="item.acName" >{{item.acName}}
+</div>
+
+<div v-for="item in ssr">
+    <input type="radio" v-model="de" @change="raLog" :value="item.sName">{{item.sName}}
+</div>
+```
+```
+data:{
+    de:'现在',
+    ssr:[
+        {
+            id:1,
+            sName:'过去',
+        },
+        {
+            id:2,
+            sName:'现在',
+        },
+        {
+            id:3,
+            sName:'未来',
+        },
+    ],
+},
+
+```
+### 选择框如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。
+```
+<label for="">属性：</label>
+<select name="" id="" v-model="df" @change="seLog" >
+    <option value="1">时间</option>
+    <option value="2">空间</option>
+    <option value="3">自然</option>
+</select>
+```
+```
+seLog:function(){
+    console.log(this.df);
+}
+```
\ No newline at end of file
-- 
Gitee