diff --git "a/\345\273\226\344\273\262\350\276\211/20240424Vue.js\346\214\207\344\273\244.md" "b/\345\273\226\344\273\262\350\276\211/20240424Vue.js\346\214\207\344\273\244.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4cef404d5bf1851e30796f87f965063d09fecb35
--- /dev/null
+++ "b/\345\273\226\344\273\262\350\276\211/20240424Vue.js\346\214\207\344\273\244.md"
@@ -0,0 +1,154 @@
+# 笔记
+
+ - 属性绑定
+```
+v-bind用于绑定属性
+```
+ - 表单处理
+```
+v-model用于从表单中获取或设置值
+```
+
+ - 内容渲染
+ ```
+v-html用于将数据当成html标签渲染
+ ```
+
+ - 条件渲染
+```
+v-if v-else-if v-else 语序逻辑和js一样，三个只显示一个。v-show和v-if相同功能，逻辑不同
+```
+ -循环渲染
+```
+v-for 后面跟="（形参1(循环项),下标，x)in 对象数组）"或="(形参2(循环项),属性名,下标)in 对象"
+```
+
+ -事件处理
+```
+v-on
+```
+
+## 源代码
+
+```vue
+<script setup>
+import { reactive } from 'vue';
+
+
+let box="我是一个小盒子"
+let obj=reactive([
+    {
+        id:1,
+        studentnumber:"189000101",
+        name:"小明",
+        gender:"男",
+        chinese:"124",
+        math:"102",
+        enlish:"90",
+        tatol:"316"
+    },
+    {
+        id:2,
+        studentnumber:"123213",
+        name:"小刚",
+        gender:"男",
+        chinese:"234",
+        math:"234",
+        enlish:"23",
+        tatol:"43"
+    },
+    {
+        id:3,
+        studentnumber:"229000101",
+        name:"小李",
+        gender:"男",
+        chinese:"24",
+        math:"12",
+        enlish:"9",
+        tatol:"16"
+    },
+    {
+        id:4,
+        studentnumber:"33000101",
+        name:"小金",
+        gender:"男",
+        chinese:"57",
+        math:"98",
+        enlish:"33",
+        tatol:"31"
+    },
+    {
+        id:5,
+        studentnumber:"189004101",
+        name:"小红",
+        gender:"女",
+        chinese:"24",
+        math:"2",
+        enlish:"120",
+        tatol:"86"
+    },
+    {
+        id:6,
+        studentnumber:"18907101",
+        name:"小狗",
+        gender:"男",
+        chinese:"1",
+        math:"1",
+        enlish:"1",
+        tatol:"1"
+    },
+])
+
+</script>
+
+
+
+<template>
+{{ box }}
+
+<table>
+    <thead>
+        <tr>
+            <th>序号</th>
+            <th>学号</th>
+            <th>姓名</th>
+            <th>性别</th>
+            <th>语文</th>
+            <th>数学</th>
+            <th>英语</th>
+            <th>总分</th>
+        </tr>
+    </thead>
+
+   <tbody >
+    <tr v-for="(item,index) in obj">
+        <td>{{ index+1 }}</td>
+        <td>{{ item.studentnumber }}</td>
+        <td>{{ item.name }}</td>
+        <td>{{ item.gender }}</td>
+        <td>{{ item.chinese }}</td>
+        <td>{{ item.math }}</td>
+        <td>{{ item.enlish }}</td>
+        <td>{{ item.tatol }}</td>
+    </tr>
+   </tbody>
+</table>
+</template>
+
+<style>
+table,td,tr,th{
+    text-align: center;
+    border:1px solid black;
+    border-collapse: collapse;
+}
+
+tr:nth-child(even) {
+        background-color: rgb(194, 97, 41)
+    }
+    tr:nth-child(odd) {
+        background-color: gray
+    }
+
+ 
+</style>
+```
\ No newline at end of file
diff --git "a/\345\273\226\344\273\262\350\276\211/20260420\345\210\235\350\257\206vue.md" "b/\345\273\226\344\273\262\350\276\211/20260420\345\210\235\350\257\206vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2a682d3bc4c3ee5ad0dc875a017342a08eb8aad0
--- /dev/null
+++ "b/\345\273\226\344\273\262\350\276\211/20260420\345\210\235\350\257\206vue.md"
@@ -0,0 +1,10 @@
+## 初识vue笔记
+
+```
+
+yarn create vue 项目名
+cd 名称 进入文件夹
+yarn 安装
+yarn dev 启动项目
+
+```
\ No newline at end of file
diff --git "a/\345\273\226\344\273\262\350\276\211/20260422\346\225\260\346\215\256\347\273\221\345\256\232.md" "b/\345\273\226\344\273\262\350\276\211/20260422\346\225\260\346\215\256\347\273\221\345\256\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c3d2dbe5ad124335149c27c6af5cfdf58dbf187a
--- /dev/null
+++ "b/\345\273\226\344\273\262\350\276\211/20260422\346\225\260\346\215\256\347\273\221\345\256\232.md"
@@ -0,0 +1,27 @@
+# 数据绑定
+```
+1.文本插值
+在js里定义变量
+然后直接在tamplate中能用{{}}进行引用
+```
+```
+2.HTML绑定
+在js里定义带h5标签的字符串变量
+然后在tamplate中标签中使用属性v-html="变量名"，进行插入某标签
+```
+```
+3.属性绑定
+在js里定义对象变量
+在tanplate中，任意标签的:style="变量名中进行绑定"
+```
+## 响应式绑定
+```
+1.ref
+在js中使用ref方法绑定数据给变量，用延时函数对变量.value进行改变
+在template中正常括号引用
+```
+```
+2.reactive
+在js中使用reactive方法绑定对象给变量
+在template中可放任意标签中的:style属性="变量名"
+```
\ No newline at end of file
diff --git "a/\345\273\226\344\273\262\350\276\211/20260423\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250.md" "b/\345\273\226\344\273\262\350\276\211/20260423\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4996a88fbfab50a7b57c8bbc0c1f363f3e0938ce
--- /dev/null
+++ "b/\345\273\226\344\273\262\350\276\211/20260423\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250.md"
@@ -0,0 +1,49 @@
+# 计算属性与侦听器笔记
+
+ - 计算属性
+```
+只能在js中定义变量，使用conputed方法中的函数进行计算，返回值
+然后在tamplate中直接{{变量名}}，拿到数据
+```
+
+ - 侦听器笔记
+ ```
+ 在js中使用watch方法进行侦听
+三个参数分别是
+(侦听对象(箭头函数包裹),回调函数(两个参数分别是新值和旧值),可选参数)
+ ```
+
+  -vue源代码
+```
+<script setup>
+import { computed, reactive, watch } from 'vue';
+
+let hu=reactive( {
+    name:"胡晨辉",
+    age:"2005-12-11"
+  })
+ 
+
+let rt=computed(()=>{
+  let a=(new Date-new Date(hu.age))/1000/60/60/24/365;
+  return a;
+})
+
+setTimeout(()=>{
+hu.name="小胡胡"
+},1500)
+
+let change=watch(()=>hu.name,(n,o)=>{
+  console.log("最初是"+n);
+  console.log("进行反映后变成"+o);
+})
+</script>
+
+<template>
+
+<h1>{{ rt }}</h1>
+<h2>{{ hu.name }}</h2>
+
+</template>
+
+```
\ No newline at end of file