diff --git "a/4\347\247\215\346\226\271\346\263\225\343\200\201\346\226\207\346\234\254\346\217\222\345\200\274\343\200\201\345\216\237\345\247\213HTML\343\200\201\345\261\236\346\200\247\347\273\221\345\256\2321.md" "b/4\347\247\215\346\226\271\346\263\225\343\200\201\346\226\207\346\234\254\346\217\222\345\200\274\343\200\201\345\216\237\345\247\213HTML\343\200\201\345\261\236\346\200\247\347\273\221\345\256\2321.md"
new file mode 100644
index 0000000000000000000000000000000000000000..edcb0bc42c2239baa8a3dd3c21976f74da90fc69
--- /dev/null
+++ "b/4\347\247\215\346\226\271\346\263\225\343\200\201\346\226\207\346\234\254\346\217\222\345\200\274\343\200\201\345\216\237\345\247\213HTML\343\200\201\345\261\236\346\200\247\347\273\221\345\256\2321.md"
@@ -0,0 +1,99 @@
+# 创建Vue3项目的几种方法
+1. 利用HBuilder X 项目模板
+文件-新建-项目-选择vue3项目
+
+vue --version  // 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue --version
+
+2. 使用 vue-cli 创建
+## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
+vue --version
+## 安装或者升级你的@vue/cli
+npm install -g @vue/cli
+## 创建
+vue create vue_test
+## 启动
+cd vue_test
+npm run serve
+复制代码
+
+3. 使用 vite 创建
+什么是vite？—— 新一代前端构建工具。 
+优势如下： 开发环境中，无需打包操作，可快速的冷启动。 - 轻量快速的热重载（HMR）。 - 真正的按需编译，不再等待整个应用编译完成。
+官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite vite、
+
+官网：https://vitejs.cn
+
+## 创建工程
+npm init vite-app <project-name>
+## 进入工程目录
+cd <project-name>
+## 安装依赖
+npm install
+## 运行
+npm run dev
+复制代码
+
+4. 基于可视化面板创建vue3项目
+vue ui
+
+
+# 模板语法
+## 文本插值
+App.vue
+```vue
+  <HelloWorld msg="bdxz" bdxz="不当小猪" />
+```
+HelloWorld.vue
+```vue
+defineProps({
+  msg: String,
+  bdxz:String
+})
+
+<template>
+  Vue{{ msg }}{{ bdxz }}
+  
+</template>
+
+```
+双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
+
+## 原始html
+双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令
+```
+bdxz="<font color=red>不当小猪</font>"
+
+<div v-html="bdxz"></div>
+```
+
+* 安全警告
+在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。
+
+
+# Attribute 绑定
+双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：
+
+```
+  <div v-bind:id="msg"></div>
+```
+```
+defineProps({
+  msg: String,
+  bdxz:String,
+  id:Number
+})
+
+<template>
+  Vue{{ msg }}  {{ bdxz }}
+  <div v-html="bdxz"></div>
+  <div v-bind:id="id"></div>
+
+  
+</template>
+
+<template>
+  
+  <HelloWorld msg="bdxz" bdxz="<font color=red>不当小猪</font>" id="10"/>
+</template>
+```
+v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
diff --git "a/Vue\345\237\272\347\241\200_\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/Vue\345\237\272\347\241\200_\344\272\213\344\273\266\345\244\204\347\220\206.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8aeab40b0ead1cec075a66c441c2abb5dc4454ba
--- /dev/null
+++ "b/Vue\345\237\272\347\241\200_\344\272\213\344\273\266\345\244\204\347\220\206.md"
@@ -0,0 +1,201 @@
+# 4.10笔记
+## 监听事件
+使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"
+
+## 事件处理器`(handler)`的值有两种：
+### 内联事件处理器
+- 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)
+```JS
+<script >
+  export default {
+    data() {
+      return {
+        count: 0
+      }
+    }
+  }
+ 
+</script>
+
+<template>
+  <button @click="count++">加 1</button>
+  <p>Count is: {{ count }}</p>
+</template>
+```
+### 方法事件处理器
+- 方法事件处理器：一个指向组件上定义的方法的属性名或是路径
+
+随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用
+```JS
+<script >
+    export default {
+      data() {
+        return {
+          name: 'Vue.js'
+        }
+      },
+    methods: {
+      greet(event) {
+      // 方法中的 `this` 指向当前活跃的组件实例
+      alert(`Hello ${this.name}!`)
+      // `event` 是 DOM 原生事件
+        if (event) {
+          alert(event.target.tagName)
+        }
+      }
+    }
+  }
+  </script>
+
+  <template>
+    <!-- `greet` 是上面定义过的方法名 -->
+  <button @click="greet">Greet</button>
+  </template>
+```
+方法事件处理器会自动接收原生 DOM 事件并触发执行。在上面的例子中，我们能够通过被触发事件的 event.target.tagName 访问到该 DOM 元素
+### 方法说内联事件判断
+模板编译器会通过检查 v-on 的值是否是合法的 JavaScript 标识符或属性访问路径来断定是何种形式的事件处理器。举例来说，foo、foo.bar 和 foo['bar'] 会被视为方法事件处理器，而 foo() 和 count++ 会被视为内联事件处理器
+## 在内联处理器中调用方法
+除了直接绑定方法名，还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件
+```JS
+  <script >
+    export default {
+        methods: {
+            say(message) {
+            alert(message)
+        }
+    }
+  }
+  </script>
+
+  <template>
+    <button @click="say('你好,坤鸡')">你好</button>
+    <button @click="say('再见,坤鸡')">再见</button>
+  </template>
+```
+## 在内联事件处理器中访问事件参数  
+有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：
+```JS
+  <script >
+    export default {
+      methods: {
+        warn(message, event) {
+          // 这里可以访问 DOM 原生事件
+          if (event) {
+            event.preventDefault()
+          }
+          alert(message)
+        }
+      }
+    } 
+  </script>
+
+  <template>
+    <!-- 使用特殊的 $event 变量 -->
+    <button @click="warn('我是坤鸡', $event)">
+    点我
+    </button>
+
+    <!-- 使用内联箭头函数 -->
+    <button @click="(event) => warn('我还是坤鸡', event)">
+    点我
+      </button>
+  </template>   
+```
+## 事件修饰符   
+在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好
+
+为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：
+- .stop
+- .prevent
+- .self
+- .capture
+- .once
+- .passive
+```JS
+<!-- 单击事件将停止传递 -->
+<a @click.stop="doThis"></a>
+
+<!-- 提交事件将不再重新加载页面 -->
+<form @submit.prevent="onSubmit"></form>
+
+<!-- 修饰语可以使用链式书写 -->
+<a @click.stop.prevent="doThat"></a>
+
+<!-- 也可以只有修饰符 -->
+<form @submit.prevent></form>
+
+<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
+<!-- 例如：事件处理器不来自子元素 -->
+<div @click.self="doThat">...</div>
+
+```
+使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为
+
+.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应：
+```JS
+<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
+<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
+<div @click.capture="doThis">...</div>
+
+<!-- 点击事件最多被触发一次 -->
+<a @click.once="doThis"></a>
+
+<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
+<!-- 以防其中包含 `event.preventDefault()` -->
+<div @scroll.passive="onScroll">...</div>
+```
+.passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能
+
+不要同时使用 .passive 和 .prevent，.passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告
+## 按键修饰符
+在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符
+```JS
+<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
+<input @keyup.enter="submit" />
+```
+直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式
+```JS
+<input @keyup.page-down="onPageDown" />
+```
+在上面的例子中，仅会在 $event.key 为 'PageDown' 时调用事件处理
+### 按键别名
+Vue 为一些常用的按键提供了别名：
+- .enter
+- .tab
+- .delete (捕获“Delete”和“Backspace”两个按键)
+- .esc
+- .space
+- .up
+- .down
+- .left
+- .right
+### 系统按键修饰符
+你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发
+- .ctrl
+- .alt
+- .shift
+- .meta
+```JS
+<!-- Alt + Enter -->
+<input @keyup.alt.enter="clear" />
+
+<!-- Ctrl + 点击 -->
+<div @click.ctrl="doSomething">随便做点什么</div>
+```
+### .exact 修饰符
+.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符
+```JS
+<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
+<button @click.ctrl="onClick">你</button>
+
+<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
+<button @click.ctrl.exact="onCtrlClick">干</button>
+
+<!-- 仅当没有按下任何系统按键时触发 -->
+<button @click.exact="onClick">嘛</button>
+```
+## 鼠标按键修饰符
+- .left
+- .right  
+- .middle
\ No newline at end of file
diff --git "a/Vue\345\237\272\347\241\200_\346\250\241\346\235\277\345\274\225\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200(\351\203\250\345\210\206).md" "b/Vue\345\237\272\347\241\200_\346\250\241\346\235\277\345\274\225\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200(\351\203\250\345\210\206).md"
new file mode 100644
index 0000000000000000000000000000000000000000..c64f116816528f5d52d9793ed8292a2305a08c76
--- /dev/null
+++ "b/Vue\345\237\272\347\241\200_\346\250\241\346\235\277\345\274\225\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200(\351\203\250\345\210\206).md"
@@ -0,0 +1,141 @@
+# 4.14笔记
+# 模板引用
+直接访问底层 DOM 元素，使用特殊的`ref`attribute:
+```JS
+<input ref="input"> 
+```
+ref与v-for中的key类似。它允许我们在一个特定的DOM元素或子组件实例被挂载后，获得对它的直接引用。
+## 访问模板引用
+挂载结束后引用都会被暴露在`this.$refs`之上：
+```JS
+<script >
+    export default {
+      mounted() {
+        this.$refs.input.focus()
+        console.log(1);
+      } 
+    }
+</script>
+
+<template>
+  <input ref="input">
+</template>
+```
+只可以在挂载后才能访问引用模板
+## v-for中的模板引用
+当在v-for中使用模板引用时，相应的引用中包含的值是一个数组
+```JS
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        1,2,3,4,5
+      ]
+    }
+  },
+  mounted() {
+    console.log(this.$refs.items)
+  }
+}
+</script>
+
+<template>
+  <ul>
+    <li v-for="item in list" ref="items">
+      {{ item }}
+    </li>
+  </ul>
+</template>
+```
+ref数组并不保证与源数组相同的顺序
+## 函数模板引用
+ref attribute还可以绑定为一个函数，在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数：
+```JS
+<input :ref="(el)"=>{ /* 将 el 赋值给一个数据属性或 ref 变量 */}> 
+```
+要使用动态的`：ref`绑定才能传入一个函数。当绑定的函数被卸载时，函数也会被调用一次，此时的el参数回事null
+## 组件上的ref
+
+# 组件基础
+## 定义一个组件
+当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：
+```JS
+<script>
+export default {
+  data() {
+    return {
+      count: 0
+    }
+  }
+}
+</script>
+
+<template>
+  <button @click="count++">You clicked me {{ count }} times.</button>
+</template>
+```
+## 使用组件
+要使用一个子组件，需要在父组件中导入它
+```JS
+//ButtonCount.vue文件
+<script>
+export default {
+  data() {
+    return {
+      count: 0
+    }
+  }
+}
+</script>
+
+<template>
+  <button @click="count++">点我   {{ count }}</button>
+</template>
+
+//App.vue文件
+<script>
+import ButtonCounter from './components/ButtonCounter.vue'
+
+export default {
+  components: {
+    ButtonCounter
+  }
+}
+</script>
+
+<template>
+  <h1>这是一个子组件</h1>
+  <ButtonCounter />
+</template>
+```
+组件可以被重用任意多次
+## 传递props
+Props是一个特殊的attributes，可以在组件上声明注册
+```JS
+// BolgPost.vue
+<script>
+export default {
+  props: ['title'],
+}
+</script>
+
+<template>
+  <h4>{{ title }}</h4>
+  <BlogPost title="你好1" /> 
+</template>
+
+//App.vue文件
+  <script>
+  import BolgPost from './components/BlogPost.vue'
+  export default {
+    components: {
+      BolgPost
+    }
+  }
+  </script>
+
+  <template>
+    <BolgPost />
+  </template>
+```
diff --git "a/Vue\345\237\272\347\241\200_\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/Vue\345\237\272\347\241\200_\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..68eccd9cdf92d0f8cb09d7d0ec3cb91ba6dd86d2
--- /dev/null
+++ "b/Vue\345\237\272\347\241\200_\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,129 @@
+# 4.13笔记
+# 生命周期
+## 生命周期钩子
+每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码
+## 注册周期钩子
+mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：
+```JS
+export default {
+  mounted() {
+    console.log(`the component is now mounted.`)
+  }
+}
+```
+还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 mounted、updated 和 unmounted
+
+所有生命周期钩子函数的 this 上下文都会自动指向当前调用它的组件实例。注意：避免用箭头函数来定义生命周期钩子，因为如果这样的话你将无法在函数中通过 this 获取组件实例
+## 生命周期图示
+[图裂了!](./imgs/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA2.png)
+# 侦听器
+## 基本事例
+```JS
+<script>
+  export default {
+    data() {
+      return {
+        question:'',
+        answer:''
+      }
+    },
+    watch: {
+      question(newQuestion,oldQuestion){
+        if(newQuestion.includes('你是谁')){
+          this.getAnswer()
+        }
+      }
+    },
+    methods: {
+      async getAnswer() {
+        this.answer = '我是A'
+      }
+    }
+  }
+</script>
+<template>
+<p>
+  问一个问题:
+  <input v-model="question" />
+</p>
+<p>{{ answer }}</p>
+</template>
+```
+## 深层侦听器
+watch 默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数——而嵌套属性的变化不会触发。如果想侦听所有嵌套的变更，需要深层侦听器：
+```JS
+export default {
+  watch: {
+    someObject: {
+      handler(newValue, oldValue) {
+        // 注意：在嵌套的变更中，
+        // 只要没有替换对象本身，
+        // 那么这里的 `newValue` 和 `oldValue` 相同
+      },
+      deep: true
+    }
+  }
+}
+```
+深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能
+## 即时回调的侦听器
+watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据
+
+我们可以用一个对象来声明侦听器，这个对象有 handler 方法和 immediate: true 选项，这样便能强制回调函数立即执行：
+
+```JS
+export default {
+  // ...
+  watch: {
+    question: {
+      handler(newQuestion) {
+        // 在组件实例创建时会立即调用
+      },
+      // 强制立即执行回调
+      immediate: true
+    }
+  }
+  // ...
+}
+```
+回调函数的初次执行就发生在 created 钩子之前。Vue 此时已经处理了 data、computed 和 methods 选项，所以这些属性在第一次调用时就是可用的
+## 回调的触发时机
+当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调
+
+默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新`之前`被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态
+
+如果想在侦听器回调中能访问被 Vue 更新`之后`的 DOM，你需要指明 flush: 'post' 选项：
+
+```JS
+export default {
+  // ...
+  watch: {
+    key: {
+      handler() {},
+      flush: 'post'
+    }
+  }
+}
+```
+## this.$watch()
+使用组件实例的 $watch() 方法来命令式地创建一个侦听器：
+```JS
+export default {
+  created() {
+    this.$watch('question', (newQuestion) => {
+      // ...
+    })
+  }
+}
+```
+如果要在特定条件下设置一个侦听器，或者只侦听响应用户交互的内容，这方法很有用。它还允许你提前停止该侦听器
+## 停止侦听器
+用 watch 选项或者 $watch() 实例方法声明的侦听器，会在宿主组件卸载时自动停止
+
+在少数情况下，你的确需要在组件卸载之前就停止一个侦听器，这时可以调用 $watch() API 返回的函数：
+```JS
+const unwatch = this.$watch('foo', callback)
+
+// ...当该侦听器不再需要时
+unwatch()
+```
\ No newline at end of file
diff --git "a/Vue\345\237\272\347\241\200_\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" "b/Vue\345\237\272\347\241\200_\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6a76abe53380290de1387f62129570ef88a00c31
--- /dev/null
+++ "b/Vue\345\237\272\347\241\200_\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md"
@@ -0,0 +1,195 @@
+# 4.12笔记
+## v-model指令
+
+## 基本用法
+### 文本
+```JS
+<p>请输入：{{ message }}</p>
+<input v-model="message" placeholder="你要输入的内容"></input>
+```
+### 多行文本
+```JS
+<p>请输入：</p>
+<p style="white-space: pre-line;">{{ message }}</p>
+<texttarea v-model="message" placeholder="你要输入的内容"></texttarea>
+```
+在`<textarea>`中不支持插值表达式的。使用 v-model 来替代
+### 复选框
+单一复选框
+```JS
+<p>请选择：<input type="checkbox" id="checkbox" v-model="checked" >荔枝<p>
+```
+可以将多个复选框绑定到同一个数组或集合的值：
+```JS
+<script >
+  export default {
+    data() {
+      return {
+        checkedName :[]
+      }
+    }
+  }
+</script>
+
+<template>
+<div> 你的选择: {{ checkedName }}</div>
+
+<input type="checkbox" id="荔枝" value="荔枝" v-model="checkedName">
+<label for="荔枝">荔枝</label>
+<input type="checkbox" id="西瓜" value="西瓜" v-model="checkedName">
+<label for="西瓜">西瓜</label>
+<input type="checkbox" id="苹果" value="苹果" v-model="checkedName">
+<label for="苹果">苹果</label>
+</template>
+```
+### 单选按钮
+```JS
+<script >
+  export default {
+    data() {
+      return {
+        checkedName :[]
+      }
+    }
+  }
+</script>
+
+<template>
+<div> 你的选择: {{ checkedName }}</div>
+
+<input type="radio" id="荔枝" value="荔枝" v-model="checkedName">
+<label for="荔枝">荔枝</label>
+<input type="radio" id="西瓜" value="西瓜" v-model="checkedName">
+<label for="西瓜">西瓜</label>
+<input type="radio" id="苹果" value="苹果" v-model="checkedName">
+<label for="苹果">苹果</label>
+</template>
+```
+### 选择器
+单个选择器
+```JS
+<script >
+  export default {
+    data() {
+      return {
+       selected :[]
+      }
+    }
+  }
+</script>
+<template>
+<div>选择: {{ selected }}</div>
+
+<select v-model="selected">
+  <option disabled value="">请选择一种水果</option>
+  <option>荔枝</option>
+  <option>西瓜</option>
+  <option>苹果</option>
+</select>
+</template>
+```
+多选（值绑定到一个数组）
+```JS
+<script >
+  export default {
+    data() {
+      return {
+       selected :[]
+      }
+    }
+  }
+</script>
+<template>
+<div>选择: {{ selected }}</div>
+
+<select v-model="selected" multiple>
+  <option disabled value="">请选择一种水果</option>
+  <option>荔枝</option>
+  <option>西瓜</option>
+  <option>苹果</option>
+</select>
+</template>
+```
+选择器的选项可以使用 v-for 动态渲染：
+```JS
+<script >
+  export default {
+    data() {
+      return {
+        selected: 'A',
+        options: [
+          { text: '西瓜', value: '西瓜' },
+          { text: '黄瓜', value: '黄瓜' },
+          { text: '倭瓜', value: '倭瓜' }
+      ]
+      }
+    }
+  }
+</script>
+<template>
+<select v-model="selected">
+  <option v-for="option in options" :value="option.value">
+    {{ option.text }}
+  </option>
+</select>
+
+<div>选择: {{ selected }}</div>
+</template>
+```
+## 值绑定
+对于单选按钮，复选框和选择器选项，v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值)：
+```JS
+<!-- `picked` 在被选择时是字符串 "a" -->
+<input type="radio" v-model="picked" value="a" />
+
+<!-- `toggle` 只会为 true 或 false -->
+<input type="checkbox" v-model="toggle" />
+
+<!-- `selected` 在第一项被选中时为字符串 "abc" -->
+<select v-model="selected">
+  <option value="abc">ABC</option>
+</select>
+```
+但有时我们可能希望将该值绑定到当前组件实例上的动态数据。这可以通过使用 v-bind 来实现。此外，使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型
+### 复选框
+```JS
+<input
+  type="checkbox"
+  v-model="toggle"
+  true-value="yes"
+  false-value="no" />
+  ```
+true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值：
+```JS
+<input
+  type="checkbox"
+  v-model="toggle"
+  :true-value="dynamicTrueValue"
+  :false-value="dynamicFalseValue" />
+```
+### 单选按钮
+```JS
+<input type="radio" v-model="pick" :value="first" />
+<input type="radio" v-model="pick" :value="second" />
+```
+pick 会在第一个按钮选中时被设为 first，在第二个按钮选中时被设为 second
+### 选择器选项
+```JS
+<select v-model="selected">
+  <!-- 内联对象字面量 -->
+  <option :value="{ number: 123 }">123</option>
+</select>
+```
+v-model 同样也支持非字符串类型的值绑定！在上面这个例子中，当某个选项被选中，selected 会被设为该对象字面量值 { number: 123 }
+## 修饰符
+### .lazy
+在每次 change 事件后更新数据
+<input v-model.lazy="msg"/>
+### .number
+用户输入自动转换为数字
+<input v-model.number="msg"/>
+### .trim
+默认自动去除用户输入内容中两端的空格
+```JS
+<input v-model.trim="msg"/>
+```
\ No newline at end of file
diff --git a/readme.md b/readme.md
deleted file mode 100644
index 4cb2c7e6b084fe8c4625952aa88e9e6d1904d814..0000000000000000000000000000000000000000
--- a/readme.md
+++ /dev/null
@@ -1 +0,0 @@
-## 21级软件2班 vue学习笔记
\ No newline at end of file
diff --git "a/\345\210\235\350\257\206Vue3.md" "b/\345\210\235\350\257\206Vue3.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bb0f4e7410ae12c98cb7dc24d3f0a1d616d167b2
--- /dev/null
+++ "b/\345\210\235\350\257\206Vue3.md"
@@ -0,0 +1,55 @@
+# 创建一个Vue项目
+推荐的 IDE 配置是 Visual Studio Code + Volar 扩展。
+## 方法一
+1. 新建文件夹，用Code打开
+2. 新建终端，输入yarn init,回车
+3. 输入yarn create vite --template vue 或者 yarn create vite(选择Vue、JavaScript)
+4. cd .\vite-project\
+5. yarn
+6. yarn dev 运行
+
+## 方法二
+1. 新建文件夹，用Code打开
+2. 新建终端，输入npm init vue@latest,回车
+3. 选项见下图
+![emo](./imgs/20230329.png)
+4. cd <your-project-name>
+5. npm install 
+6. npm run dev
+
+
+
+# API 风格
+Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。
+
+## 选项式 API (Options API)
+使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
+
+
+# 通过 CDN 使用 Vue
+## 使用全局构建版本
+```html
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue</title>
+</head>
+<body>
+    <div id="app">{{msg}}</div>
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script>
+        const{createApp}=Vue;
+        createApp({
+            data(){
+                return{
+                    msg:'bdxz'
+                }
+            }
+        }).mount('#app')
+    </script>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\345\261\236\346\200\247\347\273\221\345\256\232.md" "b/\345\261\236\346\200\247\347\273\221\345\256\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..22592086bca055436c9f3f06a0a2da1c321bc107
--- /dev/null
+++ "b/\345\261\236\346\200\247\347\273\221\345\256\232.md"
@@ -0,0 +1,47 @@
+# Attribute 绑定
+## 简写
+因为 v-bind 非常常用，我们提供了特定的简写语法：
+
+<div :id="dynamicId"></div>
+开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的
+
+## 布尔型 Attribute
+
+布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。
+
+* isDisabled默认为true，为不显示；如果为false时，则显示
+```
+<template>
+  <HelloWorld msg="bdxz" bdxz="<font color=red>不当小猪</font>" id="10" isDisabled="true" />
+</template>
+
+defineProps({
+  msg: String,
+  bdxz:String,
+  id:Number,
+  isDisabled:Boolean
+})
+
+
+<template>
+  Vue{{ msg }}  {{ bdxz }}
+  <div v-html="bdxz"></div>
+  <div v-bind:id="id"></div>
+  <input type="button" :disabled="isDisabled" value="bdxz">
+</template>
+```
+
+## 动态绑定多个值
+如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：
+```
+const testObj={
+  id:03,
+  class:'btnSave',
+  name:'bdxz'
+}
+```
+通过不带参数的 v-bind，你可以将它们绑定到单个元素上：
+
+```
+  <input type="text" v-bind="testObj">
+```
\ No newline at end of file
diff --git "a/\346\214\207\344\273\244\343\200\201\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md" "b/\346\214\207\344\273\244\343\200\201\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1101d17cea58b832f069f9aca58495163d403528
--- /dev/null
+++ "b/\346\214\207\344\273\244\343\200\201\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md"
@@ -0,0 +1,190 @@
+# 指令 Directives
+1. v-if - 根据表达式的值条件性地渲染元素。如果表达式为真，则元素会被渲染；否则，元素将被删除。可以使用 v-else 和 v-else-if 来添加其他条件分支。
+
+2. v-for - 基于源数据多次渲染元素或块。v-for 通过遍历数组或对象中的项来生成内容。可以使用 v-for 的特殊语法来访问数组或对象的当前项、索引和键。
+
+3. v-on - 绑定事件监听器，触发回调函数。可以使用 v-on 绑定常见的 DOM 事件（如 click、input、submit 等）以及自定义事件。可以使用 event 对象访问原生事件，也可以通过 $event 访问原生事件的属性和方法。
+
+4. v-bind - 动态地绑定一个或多个特性，或一个组件 prop 到表达式。可以使用 : 缩写语法，例如 :href="url"。可以使用动态绑定表达式来计算特性或 prop 的值。
+
+5. v-model - 在表单输入控件上创建双向数据绑定。v-model 绑定到一个数据属性，并在用户输入时自动更新该属性。可以使用 v-model 来绑定输入控件的值、选中状态、多选列表等。
+
+6. v-text - 更新元素的 textContent。和 {{ }} 的插值语法类似，可以使用 v-text 来直接更新元素的文本内容，而不是使用 textContent 属性。
+
+7. v-html - 更新元素的 innerHTML。可以使用 v-html 来直接将字符串作为 HTML 插入到元素中。但是要注意潜在的安全风险，因为插入的内容可能包含恶意脚本或标签。
+![emo](./imgs/20230403.png)
+
+# 响应式基础
+
+## 选项式
+```
+<script>
+export default{
+  data(){
+    return{
+      msg:'么凹猫',
+      list:[
+        {
+          id:1,
+          productName:'iphone11',
+          price:'6999',
+        },
+        {
+          id:2,
+          productName:'iphone12',
+          price:'7999',
+        },
+        {
+          id:3,
+          productName:'iphone13',
+          price:'8999',
+        },
+        {
+          id:4,
+          productName:'iphone14',
+          price:'9999',
+        },
+      ]
+    }
+  },
+  methods:{
+    rnd(){
+      let r=Math.floor(Math.random()*4) ;
+      console.log(r);
+      let str='不当小猪么凹猫'
+      let rndName=str.substring(Math.floor(Math.random()*str.length),1)  
+      this.list[r].productName=rndName
+    }
+  }
+}
+</script>
+
+<template>
+  <table>
+    <tr>
+      <th>Id</th>
+      <th>产品名称</th>
+      <th>价格</th>
+      <th>操作</th>
+    </tr>
+    <tr v-for="item in list">
+      <td>
+        {{ item.id }}
+      </td>
+      <td>
+        {{ item.productName }}
+      </td>
+      <td>
+        {{ item.price }}
+      </td>
+      <td>
+        <input type="button" value="编辑">
+        <input type="button" value="删除">
+      </td>
+    </tr>
+  </table>
+  <input type="text" v-model="msg">
+  <input type="button" value="改变" @click="rnd">
+  {{ msg }}
+</template>
+```
+
+## 组合式
+```
+<script setup>
+import { reactive } from 'vue';
+let list=reactive([
+  {
+          id:1,
+          productName:'iphone11',
+          price:'6999',
+        },
+        {
+          id:2,
+          productName:'iphone12',
+          price:'7999',
+        },
+        {
+          id:3,
+          productName:'iphone13',
+          price:'8999',
+        },
+        {
+          id:4,
+          productName:'iphone14',
+          price:'9999',
+        },
+      ])
+
+
+    function rnd(){
+      let r=Math.floor(Math.random()*4) ;
+      console.log(r);
+      let str='不当小猪么凹猫'
+      let rndName=str.substring(Math.floor(Math.random()*str.length),1)  
+      this.list[r].productName=rndName
+    }
+  
+
+</script>
+
+<template>
+  <table>
+    <tr>
+      <th>Id</th>
+      <th>产品名称</th>
+      <th>价格</th>
+      <th>操作</th>
+    </tr>
+    <tr v-for="item in list">
+      <td>
+        {{ item.id }}
+      </td>
+      <td>
+        {{ item.productName }}
+      </td>
+      <td>
+        {{ item.price }}
+      </td>
+      <td>
+        <input type="button" value="编辑">
+        <input type="button" value="删除">
+      </td>
+    </tr>
+  </table>
+  <input type="text" v-model="msg">
+  <input type="button" value="改变" @click="rnd">
+  {{ msg }}
+</template>
+```
+## 声明方法
+```
+<script>
+export default{
+  mounted(){
+    console.log(1111+'bdxz');
+    this.add();
+    this.bbc();
+    this.ok() //undefind
+  },
+  methods:{
+    add(){
+      console.log('111');
+      console.log(this);
+    },
+    bbc:function(){
+      console.log('222');
+      console.log(this);
+    },
+    ok:()=>{
+      console.log('333');
+      console.log(this);
+    }
+  }
+}
+</script>
+```
+使用this实例，不能使用箭头函数
+
+## DOM 更新时机​
+当你更改响应式状态后，DOM 会自动更新。然而，你得注意 DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改，每个组件都只更新一次。
diff --git "a/\346\235\241\344\273\266\346\270\262\346\237\223.md" "b/\346\235\241\344\273\266\346\270\262\346\237\223.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3ecec81c3ed6e8e340856466cfadd64f5d849357
--- /dev/null
+++ "b/\346\235\241\344\273\266\346\270\262\346\237\223.md"
@@ -0,0 +1,137 @@
+## 条件渲染
+v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
+一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。
+```js
+      data(){
+    return {
+      as :false
+    }
+  }
+
+   <div v-if = "as">ddd</div>
+ <div v-else>ccc</div>
+
+```
+
+#### v-else-if
+
+```js
+data(){
+    return {
+      as :0
+    }
+  }
+
+<div v-if = "as===1">ddd</div>
+<div v-else-if = "as===2">ccc</div>
+<div v-else-if = "as===3">bbb</div>
+<div v-else>ttt</div>
+
+```
+
+#### v-show
+
+```js
+      data(){
+    return {
+      as :false
+    }
+  }
+    <p v-if = 'as'>dd</p>
+    <p v-show  = 'as'>ss</p>
+```
+v-show中的css属性display会被修改为none
+
+# 列表渲染
+#### v-for
+
+```js
+  data(){
+    return {
+    item :[
+      {
+        nane :'dd'
+      },
+      {
+        nane :'cc'
+      }
+    ]
+    }
+  }
+
+     <ol>
+    <li v-for = 'item in item'>
+      {{ item.nane }}
+    </li>
+  </ol>
+
+```
+v-for 块中可以完整地访问父作用域内的属性和变量。
+```js
+  data(){
+    return {
+      uid : 'as',
+    item :[
+      {
+        nane :'dd'
+      },
+      {
+        nane :'cc'
+      }
+    ]
+    }
+  }
+
+      <li v-for = 'item in item'>
+     {{ uid }} - {{ item.nane }}
+    </li>
+    // as-dd as-cc
+
+```
+#### v-if 和 v-for
+
+当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：
+需嵌套一层
+```js
+ data(){
+    return {
+    item :[
+      {
+        id : 1,
+        nane :'刻晴'
+      },  {
+        id : 2,
+        nane :'影'
+      },  {
+        id : 3,
+        nane :'八重神子'
+      },  {
+        id : 4,
+        nane :'丽莎'
+      },
+    ]
+    }
+  }
+
+
+
+    <div>
+    <template v-for = "key in item">
+      <li v-if="key.id ===2">
+      {{ key.nane }}
+      </li>
+    </template>
+  </div>
+
+```
+通过key管理状态，key的值不得重复
+
+## 数组变化侦测
+变更方法
+1. push()
+2. pop()
+3. shift()
+4. unshift()
+5. splice()
+6. sort()
+7. reverse()
\ No newline at end of file
diff --git "a/\350\256\241\347\256\227\345\261\236\346\200\247\343\200\201\347\261\273\344\270\216\346\240\267\345\274\217\347\273\221\345\256\232.md" "b/\350\256\241\347\256\227\345\261\236\346\200\247\343\200\201\347\261\273\344\270\216\346\240\267\345\274\217\347\273\221\345\256\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b771a9b2fa31ddb11e1e137c9782153e9748d11a
--- /dev/null
+++ "b/\350\256\241\347\256\227\345\261\236\346\200\247\343\200\201\347\261\273\344\270\216\346\240\267\345\274\217\347\273\221\345\256\232.md"
@@ -0,0 +1,183 @@
+# 计算属性
+## 计算属性的定义和使用
+计算属性可以通过现有的数据来计算出派生状态。计算属性可以通过 computed 函数来定义。在选项式组件中，可以在 computed 对象中定义计算属性。
+```
+export default {
+  data() {
+    return {
+      count: 0
+    }
+  },
+  computed: {
+    doubled() {
+      return this.count * 2;
+    }
+  }
+}
+```
+在上面的代码中，定义了一个计算属性 doubled，它返回 count 的两倍。在模板中，可以像使用普通属性一样使用计算属性。
+
+```
+<template>
+  <div>
+    <p>{{ count }}</p>
+    <p>{{ doubled }}</p>
+  </div>
+</template>
+```
+在上面的模板中，展示了 count 和 doubled 的值。当 count 发生变化时，doubled 的值也会自动更新。
+
+## 计算属性的响应式
+计算属性是响应式的，这意味着当依赖的 data 属性发生改变时，计算属性会自动更新。
+```
+export default {
+  data() {
+    return {
+      count: 0,
+      message: ''
+    }
+  },
+  computed: {
+    doubled() {
+      return this.count * 2;
+    },
+    reversed() {
+      return this.message.split('').reverse().join('');
+    }
+  }
+}
+```
+在上面的代码中，定义了两个计算属性：doubled 和 reversed。doubled 依赖于 count，reversed 依赖于 message。当 count 或 message 发生变化时，相应的计算属性会自动更新。
+
+## 计算属性的 setter
+计算属性还支持 setter，它允许对计算属性进行赋值。可以通过 get 和 set 方法来定义计算属性。
+```
+export default {
+  data() {
+    return {
+      firstName: 'John',
+      lastName: 'Doe'
+    }
+  },
+  computed: {
+    fullName: {
+      get() {
+        return this.firstName + ' ' + this.lastName;
+      },
+      set(value) {
+        const names = value.split(' ');
+        this.firstName = names[0];
+        this.lastName = names[1];
+      }
+    }
+  }
+}
+```
+在上面的代码中，定义了一个计算属性 fullName，它由 firstName 和 lastName 派生而来。还定义了一个 set 方法，用于在 fullName 中设置新的值。这样，可以通过 fullName 来修改 firstName 和 lastName。
+```
+<template>
+  <div>
+    <p>{{ fullName }}</p>
+    <input v-model="fullName" />
+  </div>
+</template>
+
+```
+
+在上面的模板中，展示了 fullName 的值，并使用 v-model 指令将 fullName 绑定到输入框中。当用户修改输入框中的值时，set 方法会自动被调用，从而修改 firstName 和 lastName 的值。
+
+# Class 与 Style 绑定
+Vue3中的选项式class和style绑定是用来动态设置元素的class和style属性的。这些属性可以根据组件的状态或数据的变化而动态变化。在Vue3中，class和style的绑定可以用v-bind指令或简写语法来实现。
+
+## class绑定
+Vue3中的class绑定有两种方式：
+### 1.1 对象语法
+当需要根据组件状态来动态设置class时，可以使用对象语法。例如，可以根据组件的isActive状态来切换class：
+
+```
+<template>
+  <div :class="{ active: isActive }"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isActive: false
+    }
+  }
+}
+</script>
+```
+当isActive为true时，div元素将拥有class名为“active”，否则不会有该class。
+
+### 1.2 数组语法
+当需要同时应用多个class时，可以使用数组语法。例如，可以同时添加多个class：
+```
+<template>
+  <div :class="[activeClass, errorClass]"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeClass: 'active',
+      errorClass: 'text-danger'
+    }
+  }
+}
+</script>
+```
+在这个例子中，div元素将同时拥有class名为“active”和“text-danger”。
+
+## style绑定
+Vue3中的style绑定同样有两种方式：
+### 2.1 对象语法
+当需要根据组件状态来动态设置样式时，可以使用对象语法。例如，可以根据组件的textColor状态来设置字体颜色：
+
+```
+<template>
+  <div :style="{ color: textColor }"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      textColor: 'red'
+    }
+  }
+}
+</script>
+```
+在这个例子中，div元素将拥有红色的字体颜色。
+
+### 2.2 数组语法
+当需要同时设置多个样式时，可以使用数组语法。例如，我们可以同时设置字体颜色和背景颜色：
+```
+
+<template>
+  <div :style="[styleObject1, styleObject2]"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      styleObject1: {
+        color: 'red'
+      },
+      styleObject2: {
+        backgroundColor: 'blue'
+      }
+    }
+  }
+}
+</script>
+```
+在这个例子中，div元素将同时拥有红色的字体颜色和蓝色的背景颜色。
+
+Vue3中的选项式class和style绑定提供了一种动态设置元素属性的方式，可以根据组件状态或数据的变化而动态变化，使得组件的交互性更强。
+
+![emo](./imgs/2.5%E7%B1%BB%E4%B8%8E%E6%A0%B7%E5%BC%8F%E7%BB%91%E5%AE%9A.png)
\ No newline at end of file