diff --git "a/37\350\256\270\345\244\247\347\246\271/20230410-\347\273\204\344\273\266.md" "b/37\350\256\270\345\244\247\347\246\271/20230410-\347\273\204\344\273\266.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6be54dccd803bdc185fde0e6ac505b3849bd69e8
--- /dev/null
+++ "b/37\350\256\270\345\244\247\347\246\271/20230410-\347\273\204\344\273\266.md"
@@ -0,0 +1,77 @@
+# Vue3组件
+
+组件可以扩展HTML元素，封装可重用的代码。
+
+## 全局组件实例
+```
+注册一个简单的全局组件runoob，并使用它：
+
+<div id="app">
+    <runoob></runoob>
+</div>
+ 
+<script>
+// 创建一个Vue 应用
+const app = Vue.createApp({})
+ 
+// 定义一个名为 runoob的新全局组件
+app.component('runoob', {
+    template: '<h1>自定义组件!</h1>'
+})
+ 
+app.mount('#app')
+</script>
+```
+再注册一个button-counter组件，在每次点击后，计数器会加1:
+```
+// 创建一个Vue 应用
+const app = Vue.createApp({})
+
+// 定义一个名为 button-counter 的新全局组件
+app.component('button-counter', {
+  data() {
+    return {
+      count: 0
+    }
+  },
+  template: `
+    <button @click="count++">
+      点了 {{ count }} 次！
+    </button>`
+})
+app.mount('#app')
+</script>
+```
+注意：template 中 ` 是反引号，不是单单引号 '。
+
+## 组件的复用
+将组件进行任意次数的复用：
+```
+<div id="components-demo">
+  <button-counter></button-counter>
+  <button-counter></button-counter>
+  <button-counter></button-counter>
+</div>
+```
+
+## 全局组件
+注册一个简单的全局组件runoob，并使用它：
+```
+
+<div id="app">
+    <runoob></runoob>
+</div>
+ 
+<script>
+// 创建一个Vue 应用
+const app = Vue.createApp({})
+ 
+// 定义一个名为 runoob 的新全局组件
+app.component('runoob', {
+    template: '<h1>自定义组件!</h1>'
+})
+ 
+app.mount('#app')
+</script>
+```
+
diff --git "a/37\350\256\270\345\244\247\347\246\271/20230411-\347\273\204\344\273\2662.md" "b/37\350\256\270\345\244\247\347\246\271/20230411-\347\273\204\344\273\2662.md"
new file mode 100644
index 0000000000000000000000000000000000000000..097ee060424d157093b4a94cf3825c4241bc804e
--- /dev/null
+++ "b/37\350\256\270\345\244\247\347\246\271/20230411-\347\273\204\344\273\2662.md"
@@ -0,0 +1,143 @@
+# Vue3组件
+
+## 局部组件
+一个普通的JavaScript对象来定义组件：
+```
+const ComponentA = {
+  /* ... */
+}
+const ComponentB = {
+  /* ... */
+}
+const ComponentC = {
+  /* ... */
+}
+```
+在components选项中定义你想要使用的组件：
+```
+const app = Vue.createApp({
+  components: {
+    'component-a': ComponentA,
+    'component-b': ComponentB
+  }
+})
+```
+对于components对象中的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。
+也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
+```
+注册一个简单的局部组件 runoobA，并使用它：
+<div id="app">
+    <runoob-a></runoob-a>
+</div>
+<script>
+var runoobA = {
+  template: '<h1>自定义组件!</h1>'
+}
+ 
+const app = Vue.createApp({
+  components: {
+    'runoob-a': runoobA
+  }
+})
+ 
+app.mount('#app')
+</script>
+```
+
+## Prop
+prop是子组件用来接受父组件传递过来的数据的一个自定义属性。
+父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
+```
+<div id="app">
+  <site-name title="Google"></site-name>
+  <site-name title="Runoob"></site-name>
+  <site-name title="Taobao"></site-name>
+</div>
+ 
+<script>
+const app = Vue.createApp({})
+ 
+app.component('site-name', {
+  props: ['title'],
+  template: `<h4>{{ title }}</h4>`
+})
+ 
+app.mount('#app')
+</script>
+```
+一个组件默认可以拥有任意数量的prop，任何值都可以传递给任何prop。
+
+### 动态Prop
+类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
+```
+<div id="app">
+  <site-info
+    v-for="site in sites"
+    :id="site.id"
+    :title="site.title"
+  ></site-info>
+</div>
+ 
+<script>
+const Site = {
+  data() {
+    return {
+      sites: [
+        { id: 1, title: 'Google' },
+        { id: 2, title: 'Runoob' },
+        { id: 3, title: 'Taobao' }
+      ]
+    }
+  }
+}
+ 
+const app = Vue.createApp(Site)
+ 
+app.component('site-info', {
+  props: ['id','title'],
+  template: `<h4>{{ id }} - {{ title }}</h4>`
+})
+ 
+app.mount('#app')
+</script>
+```
+
+### Prop验证
+组件可以为props指定验证要求。
+定制prop的验证方式，可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
+```
+Vue.component('my-component', {
+  props: {
+    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
+    propA: Number,
+    // 多个可能的类型
+    propB: [String, Number],
+    // 必填的字符串
+    propC: {
+      type: String,
+      required: true
+    },
+    // 带有默认值的数字
+    propD: {
+      type: Number,
+      default: 100
+    },
+    // 带有默认值的对象
+    propE: {
+      type: Object,
+      // 对象或数组默认值必须从一个工厂函数获取
+      default: function () {
+        return { message: 'hello' }
+      }
+    },
+    // 自定义验证函数
+    propF: {
+      validator: function (value) {
+        // 这个值必须匹配下列字符串中的一个
+        return ['success', 'warning', 'danger'].indexOf(value) !== -1
+      }
+    }
+  }
+})
+```
+当prop验证失败的时候，(开发环境构建版本的)Vue将会产生一个控制台的警告。
\ No newline at end of file
diff --git "a/37\350\256\270\345\244\247\347\246\271/20230413-\350\256\241\347\256\227\345\261\236\346\200\247.md" "b/37\350\256\270\345\244\247\347\246\271/20230413-\350\256\241\347\256\227\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..cd835ec6394a59a529ca6464eead2de63a4dc38b
--- /dev/null
+++ "b/37\350\256\270\345\244\247\347\246\271/20230413-\350\256\241\347\256\227\345\261\236\346\200\247.md"
@@ -0,0 +1,99 @@
+# Vue3计算属性
+
+计算属性关键词: computed。
+计算属性在处理一些复杂逻辑时是很有用的。
+反转字符串的例子：
+```
+<div id="app">
+  {{ message.split('').reverse().join('') }}
+</div>
+```
+
+使用了计算属性的实例：
+```
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Vue 测试实例 - 百度知道(baidu.com)</title>
+<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
+</head>
+<body>
+<div id="app">
+  <p>原始字符串: {{ message }}</p>
+  <p>计算后反转字符串: {{ reversedMessage }}</p>
+</div>
+    
+<script>
+const app = {
+  data() {
+    return {
+      message: 'RUNOOB!!'
+    }
+  },
+  computed: {
+    // 计算属性的 getter
+    reversedMessage: function () {
+      // `this` 指向 vm 实例
+      return this.message.split('').reverse().join('')
+    }
+  }
+}
+ 
+Vue.createApp(app).mount('#app')
+</script>
+</body>
+</html>
+```
+上述声明了一个计算属性reversedMessage 。
+提供的函数将用作属性vm.reversedMessage的getter 。
+vm.reversedMessage 依赖于 vm.message，vm.message发生改变时，vm.reversedMessage也会更新。
+
+## computed vs methods
+可以使用methods来替代computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods，在重新渲染的时候，函数总会重新调用执行。
+```
+methods: {
+  reversedMessage2: function () {
+    return this.message.split('').reverse().join('')
+  }
+}
+```
+computed性能会更好，但是如果不希望缓存，可以使用methods属性。
+
+## computed setter
+computed属性默认只有getter ，不过在需要时你也可以提供一个setter ：
+```
+const app = {
+  data() {
+    return {
+      name: 'Google',
+      url: 'http://www.google.com'
+    }
+  },
+  computed: {
+    site: {
+      // getter
+      get: function () {
+        return this.name + ' ' + this.url
+      },
+      // setter
+      set: function (newValue) {
+        var names = newValue.split(' ')
+        this.name = names[0]
+        this.url = names[names.length - 1]
+      }
+    }
+  }
+}
+vm = Vue.createApp(app).mount('#app')
+document.write('name: ' + vm.name);
+document.write('<br>');
+document.write('url: ' + vm.url);
+document.write('<br>------ 更新数据 ------<br>');
+// 调用 setter， vm.name 和 vm.url 也会被对应更新
+vm.site = 'https://www.baidu.com';
+document.write('name: ' + vm.name);
+document.write('<br>');
+document.write('url: ' + vm.url);
+```
+从实例运行结果看在运行vm.site = 'http://www.baidu.com'; 时，setter会被调用，vm.name和vm.url也会被对应更新。
\ No newline at end of file
diff --git "a/37\350\256\270\345\244\247\347\246\271/20230414-\347\233\221\345\220\254\345\261\236\346\200\247.md" "b/37\350\256\270\345\244\247\347\246\271/20230414-\347\233\221\345\220\254\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..502a40e17d7c86563976d21c192172332fda9b8c
--- /dev/null
+++ "b/37\350\256\270\345\244\247\347\246\271/20230414-\347\233\221\345\220\254\345\261\236\346\200\247.md"
@@ -0,0 +1,103 @@
+# Vue3监听属性
+
+
+使用watch实现计数器：
+```
+<div id = "app">
+    <p style = "font-size:25px;">计数器: {{ counter }}</p>
+    <button @click = "counter++" style = "font-size:25px;">点我</button>
+</div>
+   
+<script>
+const app = {
+  data() {
+    return {
+      counter: 1
+    }
+  }
+}
+vm = Vue.createApp(app).mount('#app')
+vm.$watch('counter', function(nval, oval) {
+    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
+});
+</script>
+```
+进行千米与米之间的换算：
+```
+<div id = "app">
+    千米 : <input type = "text" v-model = "kilometers"  @focus="currentlyActiveField = 'kilometers'">
+    米 : <input type = "text" v-model = "meters" @focus="currentlyActiveField = 'meters'">
+</div>
+<p id="info"></p>    
+<script>
+const app = {
+  data() {
+    return {
+      kilometers : 0,
+      meters:0
+    }
+  },
+  watch : {
+    kilometers:function(newValue, oldValue) {
+      // 判断是否是当前输入框
+      if (this.currentlyActiveField === 'kilometers') {
+        this.kilometers = newValue;
+        this.meters = newValue * 1000
+      }
+    },
+    meters : function (newValue, oldValue) {
+      // 判断是否是当前输入框
+      if (this.currentlyActiveField === 'meters') {
+        this.kilometers = newValue/ 1000;
+        this.meters = newValue;
+      }
+    }
+  }
+}
+vm = Vue.createApp(app).mount('#app')
+vm.$watch('kilometers', function (newValue, oldValue) {
+  // 这个回调将在 vm.kilometers 改变后调用
+  document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
+})
+</script>
+```
+以上代码中创建了两个输入框，data 属性中，kilometers和meters初始值都为0。watch对象创建了data对象的两个监控方法：kilometers 和 meters。
+再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。
+
+## 异步加载中使用watch
+异步数据的加载Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。
+```
+<script src="https://cdn.staticfile.org/axios/0.27.2/axios.min.js"></script>
+<script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
+<script>
+  const watchExampleVM = Vue.createApp({
+    data() {
+      return {
+        question: '',
+        answer: '每个问题结尾需要输入 ? 号。'
+      }
+    },
+    watch: {
+      // 每当问题改变时，此功能将运行，以 ? 号结尾，兼容中英文 ?
+      question(newQuestion, oldQuestion) {
+        if (newQuestion.indexOf('?') > -1 || newQuestion.indexOf('？') > -1) {
+          this.getAnswer()
+        }
+      }
+    },
+    methods: {
+      getAnswer() {
+        this.answer = '加载中...'
+        axios
+          .get('/try/ajax/json_vuetest.php')
+          .then(response => {
+            this.answer = response.data.answer
+          })
+          .catch(error => {
+            this.answer = '错误! 无法访问 API。 ' + error
+          })
+      }
+    }
+  }).mount('#watch-example')
+</script>
+```