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 0000000000000000000000000000000000000000..42e89d5deb16566ba7bea96f71f528ef84ed9dce
--- /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
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 0000000000000000000000000000000000000000..219ac3e60b140d3dfa84c48f3e4ca06ddce25446
--- /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,69 @@
+# 按键修饰符
+## 按键别名
+只有按了这个按键才会触发事件
+.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
+<script>
+export default{
+  data(){
+    return{
+
+    }
+  },
+  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
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 0000000000000000000000000000000000000000..d293788876d5194a196a8c2e96118d4034c96d46
--- /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
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 0000000000000000000000000000000000000000..6b3efbfdc78f565797089a97fa4afdb43ef4f1fa
--- /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,51 @@
+# 模板引用
+```vue
+<script>
+export default{
+  mounted(){
+    this.$refs.input.focus()
+  }
+}
+</script>
+
+<template>
+  <input ref="input" />
+</template> 
+```
+显示效果光标会出现在选项框上
+# 组件基础
+## 定义一个组件
+当使用构建步骤时，我们一般会将 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