From 82b27b1172c5c9cd0a3839ee473640e6696c6eb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BF=97=E5=BC=BA?= <18359128532@163.com>
Date: Mon, 10 Apr 2023 09:42:48 +0000
Subject: [PATCH 1/6] 11
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 王志强 <18359128532@163.com>
---
 ...13\344\273\266\345\244\204\347\220\206.md" | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 "\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21010\346\227\245\344\272\213\344\273\266\345\244\204\347\220\206.md"

diff --git "a/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21010\346\227\245\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21010\346\227\245\344\272\213\344\273\266\345\244\204\347\220\206.md"
new file mode 100644
index 0000000..42e89d5
--- /dev/null
+++ "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21010\346\227\245\344\272\213\344\273\266\345\244\204\347\220\206.md"
@@ -0,0 +1,100 @@
+# 事件处理
+## 监听事件
+我们可以使用v-on(简写为@)指令来监听DOM事件
+事件处理器的值可以是：
+1. 内联事件处理器
+2. 方法事件处理器
+## 内联事件处理器
+```vue
+<script>
+export default{
+  data(){
+    return{
+      count:0
+    }
+  }
+}
+</script>
+<template>
+<button @click="count++">+</button>
+<p>Count is: {{ count }}</p>
+</template>
+```
+内联事件处理器通常用于简单场景，可以直接执行语句
+## 方法事件处理器
+```vue
+<script>
+export default{
+  data(){
+    return{
+      name:'wzq'
+    }
+  },
+  methods: {
+    aa(){
+        alert(`Hello ${this.name}`)
+    }
+  }
+}
+</script>
+<template>
+<button @click="aa">button</button>
+</template>
+```
+v-on可以接受方法名或对某个方法的调用
+## 在内联处理器中调用方法
+```vue
+<script>
+export default{
+  data(){
+    return{
+      
+    }
+  },
+  methods: {
+    say(message){
+      alert(message)
+    }
+  }
+}
+</script>
+
+<template>
+<button @click="say('Hello')">button</button>
+<button @click="say('Hi')">button</button>
+</template>
+```
+除了直接绑定方法名，还可以在内联事件处理器中调用方法。这允许向方法传入自定义参数代替原生事件
+## 在内联事件处理器中访问事件参数
+有时我们需要在内联事件处理器中访问DOM事件  
+可以向该处理器方法传入一个特殊的$event变量，或者使用内联箭头函数
+```vue
+<script>
+export default{
+  data(){
+    return{
+      
+    }
+  },
+  methods: {
+  warn(event) {
+    if (event) {
+      event.preventDefault()
+    }
+  }
+}
+}
+</script>
+
+<template>
+<!-- 使用特殊的 $event 变量 -->
+<button @click="warn($event)">
+  Submit
+</button>
+
+<!-- 使用内联箭头函数 -->
+<button @click="(event) => warn(event)">
+  Submit
+</button>
+</template>
+```
\ No newline at end of file
-- 
Gitee


From ac3f9d8a56610970283286d3890f4f97a0d3d4b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BF=97=E5=BC=BA?= <18359128532@163.com>
Date: Wed, 12 Apr 2023 03:40:00 +0000
Subject: [PATCH 2/6] 11
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 王志强 <18359128532@163.com>
---
 ...56\344\277\256\351\245\260\347\254\246.md" | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 "\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21012\346\227\245\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246.md"

diff --git "a/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21012\346\227\245\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246.md" "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21012\346\227\245\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246.md"
new file mode 100644
index 0000000..5915b55
--- /dev/null
+++ "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21012\346\227\245\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246.md"
@@ -0,0 +1,47 @@
+# 按键修饰符
+## 按键别名
+只有按了这个按键才会触发事件
+.enter  
+.tab  
+.delete (捕获“Delete”和“Backspace”两个按键)  
+.esc  
+.space  
+.up  
+.down  
+.left  
+.right  
+实例:
+当按下回车(enter)键时才会触发
+```vue
+<script>
+export default{
+  data(){
+    return{
+
+    }
+  },
+  methods: {
+    aa(){
+      console.log("aaaa");
+    }
+  }
+}
+</script>
+
+<template>
+  <input type="text" @keyup.enter="aa">
+</template>
+```
+## 系统按键修饰符
+.ctrl  
+.alt  
+.shift  
+.meta  
+在 Windows 键盘上，meta 键是 Windows 键  
+系统按键与常规按键不同，只有按住系统按键的同时按其他键并释放才会触发  
+比如keyup.shift只有在你按住shift在按一下其他任意键触发
+## exact修饰符
+.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。
+```vue
+
+```
\ No newline at end of file
-- 
Gitee


From be7a1b337b391735d02a81f7b3ecebb306a9dd63 Mon Sep 17 00:00:00 2001
From: unknown <王志强>
Date: Wed, 12 Apr 2023 14:21:09 +0800
Subject: [PATCH 3/6] 11

---
 ...56\344\277\256\351\245\260\347\254\246.md" | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git "a/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21012\346\227\245\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246.md" "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21012\346\227\245\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246.md"
index 5915b55..219ac3e 100644
--- "a/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21012\346\227\245\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246.md"
+++ "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21012\346\227\245\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246.md"
@@ -43,5 +43,27 @@ export default{
 ## exact修饰符
 .exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。
 ```vue
+<script>
+export default{
+  data(){
+    return{
 
-```
\ No newline at end of file
+    }
+  },
+  methods: {
+    aa(){
+      console.log("1111");
+    },
+    bb(){
+      console.log("bbb");
+    },
+  }
+}
+</script>
+
+<template>
+<input type="button" @click.ctrl.exact="aa"  value="提交" @click.ctrl.alt="bb">
+</template>
+```
+当添加了.exact修饰符只有按ctrl才能触发
+如果去掉则都可以触发
\ No newline at end of file
-- 
Gitee


From e2dc940948b050d1edd1f65453b05c8033da731f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BF=97=E5=BC=BA?= <18359128532@163.com>
Date: Thu, 13 Apr 2023 17:33:51 +0800
Subject: [PATCH 4/6] 11

---
 ...01\344\276\246\345\220\254\345\231\250.md" | 114 ++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 "\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21013\346\227\245\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\343\200\201\347\224\237\345\221\275\345\221\250\346\234\237\343\200\201\344\276\246\345\220\254\345\231\250.md"

diff --git "a/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21013\346\227\245\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\343\200\201\347\224\237\345\221\275\345\221\250\346\234\237\343\200\201\344\276\246\345\220\254\345\231\250.md" "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21013\346\227\245\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\343\200\201\347\224\237\345\221\275\345\221\250\346\234\237\343\200\201\344\276\246\345\220\254\345\231\250.md"
new file mode 100644
index 0000000..d293788
--- /dev/null
+++ "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21013\346\227\245\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\343\200\201\347\224\237\345\221\275\345\221\250\346\234\237\343\200\201\344\276\246\345\220\254\345\231\250.md"
@@ -0,0 +1,114 @@
+# 表单输入绑定
+很容易获取输入的值
+```vue
+<script>
+export default{
+  data(){
+    return{
+      student:{
+        name:'',
+        sex:'',
+        hoddy:[],
+        address:'福建省'
+      }
+    }
+  },
+  methods: {
+    aa(){
+      console.log(this.student);
+    }
+  }
+}
+</script>
+
+<template>
+  <table>
+    <tr>
+      <td><label for="">姓名：</label></td>
+      <td><input type="text" v-model="student.name"></td>
+    </tr>
+    <tr>
+      <td><label for="">姓别：</label></td>
+      <td><input type="radio" v-model="student.sex" value="man" name="sex">男
+        <input type="radio" v-model="student.sex" value="woman" name="sex">女</td>
+    </tr>
+    <tr>
+      <td><label for="">爱好：</label></td>
+      <td>
+        <input type="checkbox" v-model="student.hoddy" value="lq">篮球
+        <input type="checkbox" v-model="student.hoddy" value="zq">足球
+        <input type="checkbox" v-model="student.hoddy" value="pp">乒乓球
+        <input type="checkbox" v-model="student.hoddy" value="ym">羽毛球
+      </td>
+    </tr>
+    <tr>
+      <td><label for="">地址：</label></td>
+      <td><select v-model="student.address">
+        <option value="fj">福建省</option>
+        <option value="gd">广东省</option>
+        <option value="yn">云南省</option>
+        <option value="zj">浙江省</option>
+      </select></td>
+    </tr>
+    <tr>
+      <td><input type="button" value="提交" @:click="aa"></td>
+    </tr>
+  </table>
+</template>
+```
+# 生命周期
+mounted、beforeUpdate、updated是最常用的生命周期钩子  
+选项式生命周期写法
+```vue
+<script>
+  export default{
+    mounted(){
+      
+    },
+    beforeUpdate(){
+
+    },
+    updated(){
+      
+    }
+  }
+</script>
+```
+组合式生命周期写法
+```vue
+<script setup>
+import { onBeforeUpdate, onMounted, onUpdated } from 'vue';
+onMounted(()=>{
+
+})
+onBeforeUpdate(()=>{
+
+})
+onUpdated(function (){
+  
+})
+</script>
+```
+# 侦听器
+```vue
+<script>
+export default{
+  data(){
+    return{
+      wt:''
+    }
+  },
+  watch: {
+    wt(newVal,oldVal){
+      if (newVal==='1') {
+        console.log('成功了');
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <input type="text" v-model="wt">
+</template>
+```
\ No newline at end of file
-- 
Gitee


From c21bad56b9239a2093db0c1281baf49a27b00fc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BF=97=E5=BC=BA?= <18359128532@163.com>
Date: Fri, 14 Apr 2023 03:42:11 +0000
Subject: [PATCH 5/6] 11
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 王志强 <18359128532@163.com>
---
 ...73\204\344\273\266\345\237\272\347\241\200.md" | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 "\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21014\346\227\245\346\250\241\346\235\277\345\272\224\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200.md"

diff --git "a/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21014\346\227\245\346\250\241\346\235\277\345\272\224\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200.md" "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21014\346\227\245\346\250\241\346\235\277\345\272\224\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200.md"
new file mode 100644
index 0000000..a0d0c3f
--- /dev/null
+++ "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21014\346\227\245\346\250\241\346\235\277\345\272\224\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200.md"
@@ -0,0 +1,15 @@
+# 模板引用
+```vue
+<script>
+export default{
+  mounted(){
+    this.$refs.input.focus()
+  }
+}
+</script>
+
+<template>
+  <input ref="input" />
+</template> 
+```
+显示效果光标会出现在选项框上
\ No newline at end of file
-- 
Gitee


From 4ae963988c2926eca5a802112c24f4279b7006f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BF=97=E5=BC=BA?= <18359128532@163.com>
Date: Sun, 16 Apr 2023 10:03:10 +0000
Subject: [PATCH 6/6] =?UTF-8?q?update=20=E7=8E=8B=E5=BF=97=E5=BC=BA/2023?=
 =?UTF-8?q?=E5=B9=B44=E6=9C=8814=E6=97=A5=E6=A8=A1=E6=9D=BF=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E3=80=81=E7=BB=84=E4=BB=B6=E5=9F=BA=E7=A1=80.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 王志强 <18359128532@163.com>
---
 ...04\344\273\266\345\237\272\347\241\200.md" | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git "a/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21014\346\227\245\346\250\241\346\235\277\345\272\224\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200.md" "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21014\346\227\245\346\250\241\346\235\277\345\272\224\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200.md"
index a0d0c3f..6b3efbf 100644
--- "a/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21014\346\227\245\346\250\241\346\235\277\345\272\224\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200.md"
+++ "b/\347\216\213\345\277\227\345\274\272/2023\345\271\2644\346\234\21014\346\227\245\346\250\241\346\235\277\345\272\224\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200.md"
@@ -12,4 +12,40 @@ export default{
   <input ref="input" />
 </template> 
 ```
-显示效果光标会出现在选项框上
\ No newline at end of file
+显示效果光标会出现在选项框上
+# 组件基础
+## 定义一个组件
+当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件  
+当不使用构建步骤时，一个 Vue 组件以一个包含 Vue 特定选项的 JavaScript 对象来定义
+##使用组件
+创建.vue文件名推荐首字母大写  
+要使用一个子组件，我们需要在父组件中导入它
+选项式  
+```vue
+<script>
+import ButtonCounter from './ButtonCounter.vue'
+
+export default {
+  components: {
+    ButtonCounter
+  }
+}
+</script>
+
+<template>
+  <h1>Here is a child component!</h1>
+  <ButtonCounter />
+</template>
+```
+组合式
+```vue
+<script setup>
+import ButtonCounter from './ButtonCounter.vue'
+</script>
+
+<template>
+  <h1>Here is a child component!</h1>
+  <ButtonCounter />
+</template>
+
+```
\ No newline at end of file
-- 
Gitee