diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\200\357\274\211\357\274\232\346\250\241\347\211\210\350\257\255\346\263\225\343\200\201\346\235\241\344\273\266\346\270\262\346\237\223\343\200\201\345\210\227\350\241\250\346\270\262\346\237\223\343\200\201key\345\200\274\347\256\241\347\220\206.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\200\357\274\211\357\274\232\346\250\241\347\211\210\350\257\255\346\263\225\343\200\201\346\235\241\344\273\266\346\270\262\346\237\223\343\200\201\345\210\227\350\241\250\346\270\262\346\237\223\343\200\201key\345\200\274\347\256\241\347\220\206.md"
new file mode 100644
index 00000000..f0ca5da7
--- /dev/null
+++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\200\357\274\211\357\274\232\346\250\241\347\211\210\350\257\255\346\263\225\343\200\201\346\235\241\344\273\266\346\270\262\346\237\223\343\200\201\345\210\227\350\241\250\346\270\262\346\237\223\343\200\201key\345\200\274\347\256\241\347\220\206.md"	
@@ -0,0 +1,286 @@
+---
+title: Vue笔记
+date: 2024/9/16
+categories:
+ - fe
+author: aoxuexinghuo
+tags:
+ - Vue
+ - 手写笔记
+ - 前端框架
+---
+## Vue学习笔记（一）：模版语法、条件渲染、列表渲染、key 值管理
+
+[TOC]
+
+### 一、模版语法
+
+Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
+
+#### 1.文本插值
+
+文本插值最基本的数据绑定语法，采用双大括号{{   }}的形式。
+
+```vue
+<template>
+  <div>
+    <p>{{ message }}</p>
+  </div>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        message: "宝可梦百科"
+      }
+    }
+  }
+</script>
+```
+
+{{   }}标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{   }} 标签内容也会更新。
+
+因此，如果不想改变标签的内容，可以通过使用 `v-once` 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。
+
+```vue
+<p v-once>该值不会改变：{{ message }}</p>
+```
+
+在上面的演示中，我们绑定的只是简单的属性名，但实际上，Vue在所有的数据绑定中都支持完整的 JavaScript 表达式。例如：
+
+```vue
+<p>{{ message.split("").reverse().join("") }}</p>
+```
+
+但需要注意的是，每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。我们可以通过其能否合法放在`return`的后面来进行判断。
+
+#### 2.原始 HTML
+
+双大括号会将数据插值为纯文本，而不是 HTML。若想插入 HTML，则需要使用`v-html`指令。我们可以通过下面的代码来观察两者的区别。
+
+```vue
+<template>
+  <div>
+    <p>{{ PMHtml }}</p>
+    <p v-html = "PMHtml"></p>
+  </div>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        PMHtml: "<a href='https://wiki.52poke.com/wiki/%E4%B8%BB%E9%A1%B5'>宝可梦百科</a>"
+      }
+    }
+  }
+</script>
+```
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/688e7b6e19362ec0a89b1e8283fee227.png)
+
+我们可以看到，前者只是做了单纯的文本替换，后者则是将我们想要的链接成功渲染出来（渲染方式为在p标签里嵌套一个a标签）。
+
+#### 3.属性绑定
+
+从前文`v-html`指令的使用中，我们可以想到，既然双大括号不能用于插入 HTML，那么修改 HTML 属性显然也是不行的。当我们想要响应式地绑定一个属性，应该使用`v-bind`指令。而如果绑定的值是`null`或者`undefined`，那么该属性将会从渲染的元素上移除。
+
+```vue
+<template>
+    <p v-bind:class = "testClass" v-bind:id = "testId" v-bind:title = "testTitle">小火龙</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        testClass: "火",
+        testId: "小火龙",
+        testTitle: null
+      }
+    }
+  }
+</script>
+```
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/058ad1e487ae154b573a3545313fefa0.png)
+
+ 我们可以看到，在 HTML 中，`class`和`id`都被成功赋值，`title`由于被赋予的值为`null`而被移除。
+
+由于`v-bind`指令使用过于频繁，我们可以通过简写的方式把`v-bind`省略，只保留冒号，如：
+
+```vue
+<p :class = "testClass" :id = "testId" :title = "testTitle">小火龙</p>
+```
+
+`v-bind`也可用于绑定布尔属性：
+
+```vue
+<template>
+  <button disabled>按钮A</button>
+  <button v-bind:disabled = "isDisabled">按钮B</button>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        isDisabled:false
+      }
+    }
+  }
+</script>
+```
+
+当我们想要动态绑定多属性时，也可以借助 JavaScript 对象：
+
+```vue
+<template>
+    <p v-bind = Object>小火龙</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        Object: {
+          class: "火",
+          id: "小火龙"
+        }
+      }
+    }
+  }
+</script>
+```
+
+### 二、条件渲染
+
+条件渲染主要借助`v-if`，`v-else`，`v-else-if`，`v-show`指令。其具体的用法与逻辑很简单，我们可以通过下面的例子具体感受：
+
+```vue
+<template>
+  <div v-if = "flag">小火龙</div>
+ 
+  <div v-if = "flag">妙蛙种子</div>
+  <div v-else>杰尼龟</div>
+ 
+  <div v-if = "type === 'A'">小火龙</div>
+  <div v-else-if = "type === 'B'">火恐龙</div>
+  <div v-else-if = "type === 'C'">喷火龙</div>
+  <div v-else>mega喷火龙X</div>
+ 
+  <div v-show = "flag">杰尼龟</div>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        flag: true,
+        type: "D"
+      }
+    }
+  }
+</script>
+```
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/365223ab25db3d457e0bd3e7438665f7.png)
+
+有些同学可能会发现，`v-if`与`v-show`的功能似乎是一样的，那么我们又为什么要引入`v-show`指令呢？或者说两者有什么区别呢？
+
+**`v-if`与`v-show`区别：**
+
+`v-if`是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听和子组件都会被销毁与重建。
+
+同事`v-if`也是惰性的，如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才会被渲染。
+
+相比之下，`v-show`更加简单，元素无论初始条件如何，始终会被渲染，只有 CSS 的`display`属性会被切换。
+
+总的来说，`v-if`有更高的切换开销，而`v-show`有更高的初始渲染开销。因此，如果需要频繁切换，则使用`v-show`比较好；如果在运行时绑定条件很少改变，则`v-if`会更合适。
+
+### 三、列表渲染
+
+我们可以使用`v-for`指令基于一个数组来渲染一个列表。`v-for`指令的值需要使用`item in items`形式的特殊语法，其中`items`是源数据的数组，而`item`是迭代项的别名（可自行更改）。
+
+遍历的对象既可以是数组，也可以是对象，或者是更为复杂的对象数组。
+
+```vue
+<template>
+  <p v-for = "item in names">{{ item }}</p>
+  <p v-for = "item in pokemon">{{ item }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        names: ["小火龙","妙蛙种子","杰尼龟"],
+        pokemon: {
+            name: "小火龙",
+            id: 1,
+            system: "fire"
+        }
+      }
+    }
+  }
+</script>
+```
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/db52c75254542a9c62c41bd5491bdeed.png)
+
+`v-for`也支持使用可选的参数`index`，`key`，`value`等（`value`可以替换为`item`）。
+
+```vue
+<template>
+  <p v-for = "(item, index) in names">{{ index }}:{{ item }}</p>
+  <p v-for = "(value, key, index) in pokemon">{{index}}-{{ key }}:{{ value }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        names: ["小火龙","妙蛙种子","杰尼龟"],
+        pokemon: {
+            name: "小火龙",
+            id: 1,
+            system: "fire"
+        }
+      }
+    }
+  }
+</script>
+```
+
+
+此外，我们也可以用of作为分隔符来代替in，这更加接近JavaScript的迭代器语法：
+
+```vue
+<p v-for = "item of names">{{ item }}</p>
+```
+
+### #通过 key 管理状态
+
+Vue 默认按照“就地更新”的策略来更新通过`v-for`渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，我们需要为每一个元素对应的块提供一个唯一的 key attribute。
+
+```vue
+<template>
+  <p v-for = "item in names" :key = "index">{{ item }}</p>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+          names: ["小火龙", "妙蛙种子", "杰尼龟"]
+      }
+    }
+  }
+</script>
+```
+
+`key`在这里是通过`v-blind`绑定的特殊 attribute（此处的`v-blind`被省略）。
+
+推荐在任何可行的时候为`v-for`提供一个 key attribute（在 Vue2 版本中不添加key会导致出现警告信息，而在最新的 Vue3 版本中取消了这一限制，我们以最新的 Vue3 为基准）。
+
+`key`绑定的值期望是一个基础类型的值，例如字符串或`number`类型。一般情况下，不建议使用`index`作为`key`值，因为数据的插入和删除会导致`index`的改变，而我们要确保每一条数据的唯一索引不会发生变化。例如，如果对象数据存在唯一的`id`属性，我们可以把`id`属性的值作为`key`。
\ No newline at end of file
diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\211\357\274\211\357\274\232\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\343\200\201\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\343\200\201\344\276\246\345\220\254\345\231\250\343\200\201\346\250\241\347\211\210\345\274\225\347\224\250.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\211\357\274\211\357\274\232\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\343\200\201\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\343\200\201\344\276\246\345\220\254\345\231\250\343\200\201\346\250\241\347\211\210\345\274\225\347\224\250.md"
new file mode 100644
index 00000000..a1d98d88
--- /dev/null
+++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\270\211\357\274\211\357\274\232\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\343\200\201\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\343\200\201\344\276\246\345\220\254\345\231\250\343\200\201\346\250\241\347\211\210\345\274\225\347\224\250.md"	
@@ -0,0 +1,267 @@
+---
+title: Vue笔记
+date: 2024/9/16
+categories:
+ - fe
+author: aoxuexinghuo
+tags:
+ - Vue
+ - 手写笔记
+ - 前端框架
+---
+##  Vue学习笔记（三）：计算属性、类与样式绑定、表单输入绑定、侦听器、模版引用
+
+[TOC]
+
+### 一、计算属性
+
+#### 1.使用方式
+
+在前面模版语法的学习中我们了解到，Vue 在所有的数据绑定中都支持使用完整地 JavaScript 表达式。但当模版中的表达式较为复杂时，可能会显得十分臃肿，难以维护。这时就要用到我们的计算属性了。下面以一个简单的代码为例，用来检查`names`数组中是否有元素：
+
+```vue
+<template>
+  <p>{{ isNames }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        names: ["小火龙", "妙蛙种子", "杰尼龟"]
+      }
+    },
+    computed: {
+      isNames() {
+        return this.names.length > 0 ? "Yes" : "No"
+      }
+    }
+  }
+</script>
+```
+
+
+ 我们通常将计算属性放在与`data`同级的`computed`中，与方法不同的是，我们在调用计算属性时不需要加括号，而是直接写函数名，使用方式与一般的属性相同。
+
+既然提到方法，我们不免疑惑，我们使用方法似乎也能实现相同的功能，为什么又要引入所谓的计算属性呢？计算属性和传统的方法相比有什么优势？
+
+#### 2.计算属性与方法的区别
+
+计算属性与方法的不同之处在于计算属性值会基于其响应式依赖而被缓存。一个计算属性只会在其响应式依赖更新时才会重新计算，否则无论被访问多少次都会直接返回先前的计算结果，而不用重复执行函数。以上面的代码为例，如果我们额外添加一行  `<p>{{ isNames }}</p>`，`isNames`函数也只会被执行一次，只有当其所依赖的`names`更新时，其才会被重新执行。
+
+与此相对的，方法调用总是会在重渲染发生时再次执行函数。
+
+### 二、类与样式绑定
+
+为了方便使用，Vue 为`class`和`style`属性的`v-bind`用法提供了功能增强，使其除了能和一般的属性一样绑定字符串外，还能够进行对象或者数组的绑定。
+
+#### 1.Class 的绑定
+
+**绑定对象：**
+我们可以通过给`v-bind: class`传递一个对象的方式来切换`class`：
+
+```vue
+<template>
+  <p :class = pokStyle>{{ name }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        name: "宝可梦",
+        pokStyle: {
+          Size: true,
+          Color: true
+        }
+      }
+    }
+  }
+</script>
+ 
+<style>
+  .Size {
+    font-size: 40px;
+  }
+  .Color {
+    color: red;
+  }
+</style>
+```
+
+**绑定数组：**
+也可以将其修改为数组的形式：
+
+```vue
+<template>
+  <p :class = Class>{{ name }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        name: "宝可梦",
+        Class: ["Size", "Color"]
+      }
+    }
+  }
+</script>
+```
+
+`：class`指令可以也和一般的`class`属性共存：
+
+```vue
+<p class = "active" :class = Class>{{ name }}</p>
+```
+
+#### 2.Style 绑定
+
+`style`与对象绑定的使用方法与`class`相同：
+
+```vue
+<template>
+  <p :style = "{color: Color, fontSize: fontSize + 'px'}">{{ name }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        name: "宝可梦",
+        Color: "blue",
+        fontSize :30
+      }
+    }
+  }
+</script>
+```
+
+`style`同样也可以与数组绑定，但其用处与对象绑定重合度较高且意义不大，这里就不在进行赘述。
+
+### 三、表单输入绑定
+
+#### 1.v-model 指令
+
+在前端处理表单数据时，我们往往需要将用户在表单框中输入的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器是一件很麻烦的事情，而 Vue 为我们提供的`v-model`指令可以帮助我们优雅地解决这个问题。
+
+下面我们依旧以一段简单的代码为例进行讲解：
+
+```vue
+<template>
+  <input type = "text" v-model = "name">
+  <p>{{ name }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        name: ""
+      }
+    }
+  }
+</script>
+```
+
+这里我们使用`v-model`指令把表单与`name`进行绑定，当我们在表单中输入内容时，下方的`name`也会实时更新，与我们所输入的内容保持一致。
+
+简单点的理解就是`v-bind`绑定属性，属于单向绑定，而`v-model`则属于双向绑定，修改任何一边都会同步到另外一边。
+
+#### 2.v-model 修饰符
+
+`v-model`指令为我们提供了以下几种修饰符：
+
+`.laze`
+
+默认情况下，`v-model`会在每次`input`事件后更新数据，我们可以添加`.lazy`修饰符来改为在每次`change`事件后更新数据。这里的`change`事件我们可以简单理解为其失去焦点或者我们按下 Enter 键。
+
+`.number`
+
+强制将用户输入的内容转换为数字类型，这样我们的属性值就会始终是一个数字。但要注意的是该修饰符只会尝试将用户输入的值转换为数字类型。如果用户输入的值无法转换为有效的数字，那么属性的值将保持为 NaN（非数字）。
+
+`.trim`
+
+自动去除用户输入值的首尾空格。
+
+### 四、侦听器
+
+侦听器的作用是侦听页面中响应式数据的变化，这些数据一旦发生变化，侦听器就会侦听到，从而进行一系列我们想要的逻辑操作。而所谓的响应式数据，我们可以简单理解为我们在`data`中声明、被 {{ }} 绑定的数据。
+
+让我们以下面的代码为例详细讲解：
+
+```vue
+<template>
+  <p>{{ name }}</p>
+  <button @click = "Update">mega进化!</button>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        name: "喷火龙"
+      }
+    },
+    methods: {
+      Update() {
+        this.name = "mega喷火龙X"
+      }
+    },
+    watch: {
+      name(newValue, oldValue) {
+        console.log(newValue, oldValue)
+      }
+    }
+  }
+</script>
+```
+
+
+我们一般把侦听函数放在与`data`同级的`watch`中，且侦听函数的函数名必须要与其侦听的数据名相同，例如我们这里的`name()`函数的作用就是侦听`name`的变化。同时侦听函数可以使用两个参数分别表示数据变化后的新值和变化前的旧值。
+
+当我们点击按钮后，“喷火龙”mega进化为“mega喷火龙X”，`name()`函数侦听到这一变化，开始执行，将`name`的新值和旧值分别打印出来。
+
+### 五、模版引用
+
+#### 1.引子
+
+在讲模版引用之前，我们先回顾一下目前已经掌握的对 DOM 的几种操作：
+
+- 改变内容：使用 {{ }} 模版语法；
+- 改变属性：使用`v-bind`指令；
+- 绑定事件：使用`v-on`指令；
+
+可以看到，目前为止，我们对于 DOM 的操作，都是通过 Vue 为我们提供的方案来实现的。虽然这几种方法已经基本满足了我们对于 DOM 操作的需求，但如果在某些特殊的情况下我们依旧想要直接地去操作 DOM，我们可以通过模版引用的方式。
+
+#### 2.模版引用获取 DOM 操作
+
+想要实现直接访问底层 DOM 元素，我们可以使用特殊的`ref`属性。`ref`属性允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。在挂载结束后，引用都会被暴露在`this.$refs`之上，下面给出代码示例：
+
+```vue
+<template>
+  <div ref = "container">{{ name }}</div>
+  <button @click = "getElementHandle">超极巨化</button>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        name: "皮卡丘"
+      }
+    },
+    methods: {
+      getElementHandle() {
+        console.log(this.$refs.container);
+        this.$refs.container.innerHTML = "超极巨皮卡丘";
+      }
+    }
+  }
+</script>
+```
+
+
+可以看到，我们给 div 标签添加了`ref = "container"`时，当该标签被挂载后，我们可以直接使用`this.$refs.container`获取相应的 DOM 节点（注意此处的写法，不要漏掉 $ 符号和 s），将该组件打印出来，并修改其文本内容。而此处的`innerHTML`就是原生 JS 里的属性，同样，通过这种方式我们可以实现以前我在原生 JS 中的所有操作。
+
+需要注意的是，我们只有在组件挂载后才能访问模版引用，而如果我们在模版中的表达式上访问`this.$refs.container`，那么在初次渲染时会是`undefined`。这是因为在初次渲染前这个元素还不存在。
diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\214\357\274\211\357\274\232\344\272\213\344\273\266\345\244\204\347\220\206\343\200\201\344\272\213\344\273\266\344\274\240\345\217\202\343\200\201\344\277\256\351\245\260\347\254\246\343\200\201\346\225\260\347\273\204\345\217\230\345\214\226\344\276\246\346\265\213.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\214\357\274\211\357\274\232\344\272\213\344\273\266\345\244\204\347\220\206\343\200\201\344\272\213\344\273\266\344\274\240\345\217\202\343\200\201\344\277\256\351\245\260\347\254\246\343\200\201\346\225\260\347\273\204\345\217\230\345\214\226\344\276\246\346\265\213.md"
new file mode 100644
index 00000000..756dbd0b
--- /dev/null
+++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\214\357\274\211\357\274\232\344\272\213\344\273\266\345\244\204\347\220\206\343\200\201\344\272\213\344\273\266\344\274\240\345\217\202\343\200\201\344\277\256\351\245\260\347\254\246\343\200\201\346\225\260\347\273\204\345\217\230\345\214\226\344\276\246\346\265\213.md"	
@@ -0,0 +1,356 @@
+---
+title: Vue笔记
+date: 2024/9/16
+categories:
+ - fe
+author: aoxuexinghuo
+tags:
+ - Vue
+ - 手写笔记
+ - 前端框架
+---
+## Vue学习笔记（二）：事件处理、事件传参、修饰符、数组变化侦测
+
+[TOC]
+
+### 一、事件处理
+
+在 Vue 中我们可以使用 `v-on` 指令来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。此外，`v-on` 指令可以缩写为 @ 符号。
+
+具体用法为：`v-on: click = "handler"`或者`@click = "handler"`。
+
+事件处理器 （handler）的值可以是内联事件处理器，也可以是方法事件处理器。
+
+#### 1.内联事件处理器
+
+内联事件处理器是指事件被触发时执行的内联 JavaScript 语句 (与 `onclick` 类似)，通常用于简单场景：
+
+```vue
+<template>
+  <button @click = "count++">Add</button>
+  <p>Counter is: {{ count }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+          count: 0
+      }
+    }
+  }
+</script>
+```
+
+#### 2.方法事件处理器
+
+方法事件处理器是一个指向组件上定义的方法的属性名或是路径，能够更加灵活地处理一些较为复杂的问题。
+
+一般我们将所有的方法或者函数都放在与`data`同级的`methods`中，通过`this`读取`data`中的数据：
+
+```vue
+<template>
+  <button @click = "addCount">Add</button>
+  <p>Counter is: {{ count }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+          count:0
+      }
+    },
+    methods: {
+      addCount() {
+        console.log("pika");
+        this.count ++
+      }
+    }
+  }
+</script>
+```
+
+### 二、事件传参
+
+事件参数可以获取`event`对象和通过事件传递数据，Vue 中的`event`对象与原生 JS 中的`event`类似
+
+#### 1.获取 event 对象
+
+```vue
+<template>
+  <button @click = "addCount">Add</button>
+  <p>Counter is: {{ count }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+          count:0
+      }
+    },
+    methods: {
+      addCount(e) {
+        console.log(e);
+        e.target.innerHTML = "Add" + this.count;
+        this.count ++
+      }
+    }
+  }
+</script>
+```
+
+
+
+#### 2.传递参数
+
+除了直接绑定方法名，我们还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：
+
+```vue
+<template>
+  <p @click = "Deliver(item)" v-for = "(item, index) of names" :key="index">{{ item }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+          names: ["小火龙", "妙蛙种子", "杰尼龟"]
+      }
+    },
+    methods: {
+      Deliver(text) {
+        console.log(text)
+      }
+    }
+  }
+</script>
+```
+
+
+当我们用自定义参数代替原生事件后，如果我们还想要获取`event`，不能在参数后直接添加`event`，而是需要在`event`前添加一个**$**符号：
+
+```vue
+<template>
+  <p @click = "Deliver(item, $event)" v-for = "(item, index) of names" :key="index">{{ item }}</p>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+          names: ["小火龙", "妙蛙种子", "杰尼龟"]
+      }
+    },
+    methods: {
+      Deliver(text, e) {
+        console.log(text,e)
+      }
+    }
+  }
+</script>
+```
+
+###  三、修饰符
+
+#### 1.事件修饰符
+
+在处理事件时调用`event.preventDefault()` 阻止默认事件或`event.stopPropagation()` 阻止事件冒泡是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。
+
+为解决这一问题，Vue 为`v-on`提供了事件修饰符。修饰符是用 `.` 表示的指令后缀，例如以下这些：
+
+`.stop`		单击事件将停止传递
+
+`.prevent` 	  提交事件将不再重新加载页面
+
+`.self` 	       只有在事件是从绑定的元素本身触发时才触发处理器。
+
+`.once` 	       确保事件处理程序最多只触发一次
+
+`.passive`	   提升事件的性能，尤其是滚动事件。
+
+下面以`.stop`为例，阻止事件冒泡：
+
+```vue
+<template>
+  <div @click.stop = "clickDiv">
+    <p @click.stop = "clickP">测试冒泡</p>
+  </div>
+</template>
+ 
+<script>
+  export default {
+    methods: {
+      clickDiv() {
+        console.log("DIV")
+      },
+      clickP() {
+        console.log("P")
+      }
+    }
+  }
+</script>
+```
+
+
+当我们点击“测试冒泡”时，只打印了 P，而没有打印外层的 DIV，说明阻止冒泡成功。
+
+同时修饰语既可以采用链式书，写也可以只有修饰符 ：
+
+```vue
+<!-- 修饰语可以使用链式书写 -->
+<a @click.stop.prevent="doThat"></a>
+ 
+<!-- 也可以只有修饰符 -->
+<form @submit.prevent></form>
+```
+
+#### 2.按键修饰符
+
+在监听键盘事件时，我们经常需要检查某些特定的按键。Vue 允许我们在`v-on`或`@`监听按键事件时
+
+添加按键修饰符，同时为一些常用的按键提供了别名：
+
+`.enter`
+
+`.tab`
+
+`.delete`	（捕获 “Delete” 和 “Backspace” 两个按键）
+
+`.esc`
+
+`.space`
+
+`.up`
+
+`.down`
+
+`.left`
+
+`.right`
+
+下面以`.enter`为例，只有当 key 为 “Enter” 时，才会调用 “submit”：
+
+```vue
+<template>
+  <input @keyup.enter="submit" />
+</template>
+ 
+<script>
+  export default {
+    methods: {
+      submit() {
+        console.log("Submitted!")
+      }
+    }
+  }
+</script>
+```
+
+除了上述按键修饰符外，还存在四个特殊的系统按键修饰符：
+
+`.ctrl`
+
+`.alt`
+
+`.shift`
+
+`.meta`
+
+系统按键修饰符和常规按键的区别在于：与`keyup`事件一起使用时，该按键必须在时间发出时处于按下状态。也就是说，`keyup.ctrl`只会在你仍然按住`ctrl`但松开了另一个键时被触发。若单独松开`ctrl`键将不会触发。这一点，大家在日常使用电脑的过程中应该也都深有体会。
+
+```vue
+  <!-- Alt + Enter -->
+  <input @keyup.alt.enter="submit" />
+  <!-- Ctrl + 点击 -->
+  <div @click.ctrl="submit">Ctrl + 点击</div>
+```
+
+#### 3.鼠标按键修饰符
+
+鼠标按键修饰符有一下三种:
+
+`.left`
+
+`.right`
+
+`.middle`
+
+这些修饰符将处理程序限定为由特定鼠标按键触发的事件。具体用法与前文类似，这里就不在赘述。
+
+### 四、数组变化侦测
+
+#### 1.变更方法
+
+Vue 能够侦听响应式数组的变更方法，并在他们被调用时触发相关的更新。这些变更方法包括：
+
+`push()`
+
+`pop()`
+
+`shift()`
+
+`unshift()`
+
+`splice()`
+
+`sort()`
+
+`reverse()`
+
+也就是说，当我使用上述这些变更方法时，UI 可以自动被实时更新，当数组发生变化，UI 便会产生相应的响应。下面我们来举例说明：
+
+```vue
+<template>
+  <button @click = "addList">添加宝可梦</button>
+  <ul>
+    <li v-for = "(item, index) of names" :key = "index">{{ item }}</li>
+  </ul>
+</template>
+ 
+<script>
+  export default {
+    data() {
+      return {
+        names:["小火龙", "妙蛙种子", "杰尼龟"]
+      }
+    },
+    methods: {
+      addList() {
+        this.names.push("皮卡丘")
+      }
+    }
+  }
+</script>
+```
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/760d538b4d7aee93f7d5e5696e675861.png)
+
+
+可以看到，当我们点击按钮时，`names`数组被添加了一个元素，而 UI 界面也发生了变化，将新加入的元素渲染了出来。
+
+#### 2.替换方法
+
+变更方法会对调用他们的原数组进行变更。相对的，也有一些不可变方法：`filter()`，`concat()`和`slice()`，这些都不会更改原数组，而是返回一个新的数组，不会引起 UI 的变化。
+
+例如，我们将上文的`addList`修改为如下：
+
+```javascript
+      addList() {
+        console.log(this.names.concat("皮卡丘"));
+        console.log(this.names)
+      }
+```
+![img](https://i-blog.csdnimg.cn/blog_migrate/f31ac612660e5b7ef46af5e6d923eb3c.png)
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/c21aa58ead6a113722125e73e2cf132c.png)
+
+我们可以看到按下按钮后，我们得到了一个新的数组，而原数组并没有发生变化，UI 也没有更新。
+
+特别的，如果我们在使用`concat()`时想要原数组也发生变化，可以通过给原数组赋值的方式实现：
+
+```javascript
+this.names = this.names.concat("皮卡丘");
+```
+
diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\224\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\213\357\274\211.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\224\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\213\357\274\211.md"
new file mode 100644
index 00000000..0fbd8488
--- /dev/null
+++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\344\272\224\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\213\357\274\211.md"	
@@ -0,0 +1,423 @@
+---
+title: Vue笔记
+date: 2024/9/16
+categories:
+ - fe
+author: aoxuexinghuo
+tags:
+ - Vue
+ - 手写笔记
+ - 前端框架
+---
+## Vue学习笔记（五）：深入了解组件（下）
+
+[TOC]
+
+### 一、组件事件（$emit）
+
+在组件的模版表达时候中，我们可以直接使用`$emit`方法触发自定义事件，触发自定义事件的目的一般是组件之间传递数据。可是在上一篇博客中我们讲到的`Props`的作用就是数据传递，为什么我们这里还要讲`$emit`呢？
+
+实际上，在`Props`的内容里我们也提到过，那就是其只能用于父组件向子组件传递数据，而`$emit`能够实现子组件向父组件传递数据。
+
+依旧是两个父子嵌套关系的文件：
+
+**Parent:**
+
+```vue
+<template>
+    <h3>Parent</h3>
+    <Child @someEvent = "getHandle"/>
+</template>
+ 
+<script>
+    import Child from "./Child.vue"
+    export default {
+        methods: {
+            getHandle(data) {
+                console.log("成功触发");
+                console.log(data)
+            }
+        },
+        components: {
+            Child
+        }
+    }
+</script>
+```
+
+**Child:**
+
+```vue
+<template>
+    <h3>Child</h3>
+    <button @click = "clickEventHandle">数据传递</button>
+</template>
+ 
+<script>
+    export default {
+        emits: ["someEvent"],
+        methods: {
+            clickEventHandle() {
+                this.$emit("someEvent", "路卡利欧")
+            }
+        }
+    }
+</script>
+```
+
+我们首先在 Child 文件中给按钮的`click`事件绑定一个`clickEventHandle()`函数，在函数中使用`this.$emit`的方式将自定义事件`someEvent`传递给 Parent（注意这里我们可以选择使用两个参数，第二个参数用于额外的数据传递，可以不加）。然后我们就可以在 Parent 中以`<Child @someEvent = "getHandle"/>`的方式将接收到的自定义事件与正常函数绑定使用了。
+
+此外，我们需要在子组件添加`emits`选项来声明自定义事件的名称，否则控制台会出现警告。
+
+### 二、组件与 v-model
+
+在前面的学习中我们已经了解了`v-model`在单个元素中的使用，其双向绑定的功能可以帮助我们轻松实现实时读取用户在输入框内输入的数据并将其同步显示出来。但如果用户输入的地方和我们想要显示或使用数据的地方不在同一个组件中，我们又该怎么解决这种跨组件的问题呢？
+
+**Show:**
+
+```vue
+<template>
+    <div>搜索内容为：{{ Text }}</div>
+    <Search @searchEvent = "getSearch"/>
+</template>
+ 
+<script>
+    import Search from "./Search.vue"
+    export default {
+        data() {
+            return {
+                Text: ""
+            }
+        },
+        components: {
+            Search
+        },
+        methods: {
+            getSearch(data) {
+                this.Text = data
+            }
+        }
+    }
+</script>
+```
+
+**Search:**
+
+```vue
+<template>
+    搜索：<input type = "text" v-model = "Text">
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                Text: ""
+            }
+        },
+        emits: ["searchEvent"],
+        watch: {
+            Text(newValue, oldValue) {
+                this.$emit("searchEvent", newValue)
+            }
+        }
+    }
+</script>
+```
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/4947fd680a2e0d35bcc9d2826db448b6.png)
+
+
+这里我们实现的功能是在 Search 组件中输入数据然后在 Show 组件中将其实时显示出来。下面我们对整个过程详细解释：
+
+首先我们在 Search 组件中使用`v-model`指令将 input 组件与`Text`双向绑定，为数据`Text`设置一个监听函数，每当`Text`内容更新时，就会触发监听函数，将变化后的新值通过`$emit`传递给Show组件，Show 组件每次接收到全新的`Text`值就会触发我们的自定义事件，将对自己的`Text`进行更新，将其渲染在网页上。这里我们巧妙的借助了监听函数与自定义事件的结合，实现了数据的跨组件实时传递功能。
+
+### 三、组件数据传递
+
+前面我们讲到关于数据传递的内容有：
+
+- 父组件给子组件传递数据：采用`props`
+
+- 子组件给父组件传递数据：采用自定义事件
+
+除了自定义事件能够实现子传父之外，我们还可以使用`props`。咳咳，是的，你没看错，就是`props`。虽然`props`不能够直接实现子传父，但是我们可以借助回调函数实现这一功能。前面关于`props`的内容我们讲到，`props`传递的可以是字符串、数组、对象，实际上，他还能够传递函数，由于函数是能够携带参数的，借助这一特点，我们便能够实现子传父。下面给出示例代码：
+
+**Parent：**
+
+```vue
+<template>
+    <h3>Parent</h3>
+    <p>父元素：{{ message }}</p>
+    <Child :onEvent = "dataFn"/>
+</template>
+ 
+<script>
+    import Child from "./Child.vue"
+    export default {
+        data() {
+            return {
+                message: ""
+            }
+        },
+        components: {
+            Child
+        },
+        methods: {
+            dataFn(data) {
+                this.message = data
+            }
+        }
+    }
+</script>
+```
+
+**Child:**
+
+```vue
+<template>
+    <h3>Child</h3>
+    <p>{{ onEvent("传递数据") }}</p>
+</template>
+ 
+<script>
+    export default {
+        props: {
+            onEvent: {
+                type: Function
+            }
+        }
+    }
+</script>
+```
+
+### 四、透传 Attributes
+
+#### 1.透传 Attributes 的使用
+
+透传 Attributes 指的是以类似于继承的方式将一个属性或`v-on`事件监听器传递给子组件。这要求继承该内容的组件只能以单个根元素作渲染。例如我们存在下面这样一个以单元素为根的组件：
+
+```vue
+<template>
+    <h3>哲尔尼亚斯</h3>
+</template>
+ 
+<style>
+    .pk{
+        color: pink;
+    }
+</style>
+```
+
+当其父元素以`<Child class = "pk"/>`使用该组件时，相当于为其唯一的根元素传递了一个`class`属性，从而使 CSS 样式生效，字体颜色变为粉色。
+
+但如果子组件存在多个根元素，继承则不会生效，例如我们为上面的代码再添加一个`<h3>`标签：
+
+```vue
+<template>
+    <h3>哲尔尼亚斯</h3>
+    <h3>伊菲尔塔尔</h3>
+</template>
+```
+
+此时，CSS 样式不会对任何一个元素生效，字体颜色都为默认的黑色。
+
+#### 2.禁用透传 Attributes
+
+如果我们不想要一个组件自动地继承`attribute`，可以在组件选项中设置：`inheritAttrs: false`。
+
+```vue
+<script>
+    export default {
+        inheritAttrs: false
+    }
+</script>
+```
+
+实际上，我们在日常中很少为用到透传 Attributes，一般情况下也不建议大家通过这种方式来为组件元素设置属性。
+
+### 五、插槽 Slots
+
+#### 1.插槽的使用
+
+前面我们了解到`props`能够用于接收任意类型的 JavaScript 的值，但如果我们想要传递的是一些 HTML 片段呢？这时我们就需要借助插槽了。具体使用方式来看下面的示例代码：
+
+**Parent:**
+
+```vue
+<template>
+    <h3>Parent</h3>
+    <Child>
+        <div>
+            <h3>插槽</h3>
+            <p>插槽内容</p>
+        </div>
+    </Child>
+</template>
+ 
+<script>
+    import Child from "./Child.vue"
+    export default {
+        components: {
+            Child
+        }
+    }
+</script>
+```
+
+**Child:**
+
+```vue
+<template>
+    <h3>Child</h3>
+    <slot></slot>
+</template>
+```
+
+这里我们将原本的`<Child/>`单标签修改为双标签，在里面写下我们需要传递的 HTML 片段。然后我们就可以在 Child 以`<slot></slot>`的方式使用该片段。这里的`<slot>`元素是一个插槽出口，标示了父元素提供的插槽内容将会在哪里被渲染，我们可以自行为其选定位置，也可以多次使用。下面这张来自官网的图片也能够帮我们更加具体的了解插槽的使用原理：
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/fac938cd2c14e6eb2520f411fdf70f20.png)
+
+#### 2.渲染作用域
+
+插槽的内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模版中定义的：
+
+**parent:**
+
+```vue
+<template>
+    <h3>Parent</h3>
+    <Child>
+        <div>
+            <h3>插槽</h3>
+            <p>{{ message }}</p>
+        </div>
+    </Child>
+</template>
+ 
+<script>
+    import Child from "./Child.vue"
+    export default {
+        data() {
+            return{
+                message: "插槽内容"
+            }
+        },
+        components: {
+            Child
+        }
+    }
+</script>
+```
+
+
+简单来说就是当我们需要在插槽内添加动态数据时，应该把数据内容写在父组件中，而不是子组件。
+
+#### 3.插槽默认值
+
+我们在子组件中使用插槽时，可以为其设置默认值，当父组件没有传递插槽内容或传递内容为空时，子组件中的插槽部分就会显示默认值的内容，否则正常显示来自父组件的插槽内容，实现方式也很简单，直接写在标签中间即可：
+
+```vue
+<slot>插槽默认值</slot>
+```
+
+#### 4.具名插槽
+
+如果我们想要传递多个不同的插槽，可以通过为插槽起名字的方式，借助`v-slot`指令实现将不同的内容传递给对应名字的插槽：
+
+**Parent:**
+
+```vue
+<template>
+    <h3>Parent</h3>
+    <Child>
+        <template v-slot:A>
+            <h3>插槽A</h3>
+        </template>
+        <template v-slot:B>
+            <h3>插槽B</h3>
+        </template>
+    </Child>
+</template>
+ 
+<script>
+    import Child from "./Child.vue"
+    export default {
+        components: {
+            Child
+        }
+    }
+</script>
+```
+
+**Child:**
+
+```vue
+<template>
+    <h3>Child</h3>
+     <slot name = "A"></slot>
+     <slot name = "B"></slot>
+</template>
+```
+
+我们在 Child 中通过`name`属性为不同的插槽取名，然后在 Parent 中就可以使用`v-slot`指令将对应的片段传递给相应名字的插槽，这里的`v-slot:`必须写在`<template>`标签中。此外，`v-slot:` 也可以简写为`#`符号。
+
+注意：`v-slot:`或`#`后不要跟空格，直接写对应插槽的名字，如果在其后面添加了空格，Vue 会将其视为无效的指令，并显示错误消息（个人亲身经历，找了好久才发现是这个问题23333）。
+
+#### 5.插槽中的数据传递
+
+前面我们讲到在插槽内添加动态数据时，应该把数据内容写在父组件中。但在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据，想要做到这一点，我们需要一种方式来让子组件在渲染时将一部分数据提供给插槽。那就是像对组件传递`props`那样，向一个插槽的出口上传递`attributes`。示例代码如下：
+
+**Parent:**
+
+```vue
+<template>
+    <h3>Parent</h3>
+    <Child v-slot = "SlotProps">
+            <h3>{{ SlotProps.msg }}</h3>
+    </Child>
+</template>
+ 
+<script>
+    import Child from "./Child.vue"
+    export default {
+        components: {
+            Child
+        }
+    }
+</script>
+```
+
+**Child:**
+
+```vue
+<template>
+    <h3>Child</h3>
+     <slot :msg = "Childmessage"></slot>
+</template>
+<script>
+    export default {
+        data(){
+            return {
+                Childmessage: "子组件数据"
+            }
+        }
+    }
+</script>
+```
+
+其大致流程是：我们先把数据传递给父组件，父组件的插槽在接收到数据后再将该数据传递回子组件。
+
+我们在子组件中以`:` （`v-bind:`的简写）加属性的方式发送数据，然后在`<Child>`中以`v-slot = "SlotProps"`的方式来接收。注意此处的`"SlotProps"`是一个对象，名字可自定义，此处便于理解我们将其起名为`SlotProps`。下面我们就可以在插槽内通过访问对象内容的方式来访问我们接收到的数据了。
+
+**注意：**此处使用的是`v-slot =`而不是`v-slot:` 因此不可以简写为`#`。
+
+而对于具名插槽，我们可以将两者写在一起：
+
+```vue
+<template v-slot:A = "SlotProps">
+    <h3>{{ SlotProps.msg }}</h3>
+</template>
+<!-- 或者 -->
+<template #A = "SlotProps">
+    <h3>{{ SlotProps.msg }}</h3>
+</template>
+```
\ No newline at end of file
diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\205\255\357\274\211\357\274\232\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220\343\200\201\350\267\257\347\224\261\343\200\201Element Plus.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\205\255\357\274\211\357\274\232\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220\343\200\201\350\267\257\347\224\261\343\200\201Element Plus.md"
new file mode 100644
index 00000000..a25e8461
--- /dev/null
+++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\205\255\357\274\211\357\274\232\347\224\237\345\221\275\345\221\250\346\234\237\351\222\251\345\255\220\343\200\201\350\267\257\347\224\261\343\200\201Element Plus.md"	
@@ -0,0 +1,279 @@
+---
+title: Vue笔记
+date: 2024/9/16
+categories:
+ - fe
+author: aoxuexinghuo
+tags:
+ - Vue
+ - 手写笔记
+ - 前端框架
+---
+## Vue学习笔记（六）：生命周期钩子、路由、Element Plus
+
+[TOC]
+
+### 一、生命周期钩子
+
+#### 1.生命周期
+
+每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。
+
+我们一般把生命周期分为以下四个阶段，先大致了解一下即可：
+
+##### （1）创建阶段
+
+**beforeCreate:**
+
+- 组件实例初始化之后，数据观测和事件机制尚未启动。
+- 无法访问`data`、`computed`、`methods`等中的数据，因为它们还未被初始化。
+
+**created:**
+
+- 组件实例已经创建完成，数据观测和事件机制已经启动。
+- 可以访问和修改`data`、`computed`、`methods`，此时可以进行数据的初始化等操作。
+- 组件还未挂载到 DOM 中，因此无法进行 DOM 操作。
+
+#####  （2）挂载阶段
+
+**beforeMount:**
+
+- 在挂载开始之前被调用
+- 此时模板已编译，但尚未渲染到页面上
+- 可以访问并修改 DOM，虽然此时的 DOM 仍未完全生成。
+
+**mounted:**
+
+- 组件挂载完成后调用，此时组件的 DOM 已经生成并插入到页面中。
+- 适合进行依赖于 DOM 的操作，比如访问子组件或使用第三方库操作 DOM。
+
+##### （3）更新阶段
+
+**beforeUpdate:**
+
+- 组件的响应式数据发生变化，开始重新渲染之前调用。
+- 此时可以在数据变化前执行一些操作，如手动修改数据。
+
+**updated:**
+
+- 组件的重新渲染完成之后调用。
+- 可以在这个钩子中执行依赖于 DOM 结构更新后的操作。
+
+##### （4）取消挂载阶段
+
+**beforeUnmount:**
+
+- 在组件实例即将从 DOM 中移除之前调用。
+- 此时组件仍然存在于 DOM 中，你可以执行一些清理工作，比如移除事件监听器或取消定时器。
+- 适用于需要在组件完全移除前进行处理的场景。
+
+**unmounted:**
+
+- 组件实例从 DOM 中移除之后调用。
+
+- 此时组件的所有绑定事件、子组件等都已被解除，DOM 元素也被彻底删除。
+- 适合用于完全清理资源或进行一些统计、日志记录等操作。
+- 下面这张图可以帮助我们更好地了解一个 Vue 组件所经历生命周期：
+
+![img](https://i-blog.csdnimg.cn/direct/a7e6a545f30444ceb99878a962d5c735.png)
+
+#### 2.钩子函数
+
+上述 Vue 组件的这些生命周期阶段为我们提供了不同的钩子函数，可以帮助我们在组件的不同生命周期阶段执行特定的逻辑。
+
+下面让我们以最常用的钩子函数`mounted()`进行举例说明：
+
+```vue
+<template>
+  <div>
+    <h1>{{ message }}</h1>
+  </div>
+</template>
+ 
+<script>
+export default {
+  data() {
+    return {
+      message: '欢迎来到 TIC!'
+    };
+  },
+  mounted() {
+    // 设置页面标题
+    document.title = 'Vue 示例';
+    // 控制台输出消息
+    console.log('组件已挂载，页面标题已设置。');
+  }
+};
+</script>
+```
+
+![img](https://i-blog.csdnimg.cn/direct/be7aa0330afa4b718ce3c3e812164dca.png)
+
+
+可以看到网页的标题成功修改，同时控制台也打印了相关信息。
+
+`mounted()`钩子函数在 Vue 组件中广泛用于绘图，尤其是我们需要在组件挂载后操作 DOM 或使用外部库来绘制图表或图形时。因为`mounted()`确保了组件的模板已经渲染完毕，DOM 元素已经存在，因此非常适合在这个阶段进行绘图操作。
+
+读者如果感兴趣可以自行去了解 chart.js，mermaid 等绘图工具的使用。
+
+**注意：**不要在 `updated` 钩子中更改组件的状态，因为这会导致无限的更新循环。
+
+### 二、路由
+
+#### 1.路由的含义
+
+Vue 的路由管理通常通过 Vue Router 来实现，它是 Vue.js 官方提供的路由库。路由的作用是根据 URL 的变化来渲染不同的组件，帮助开发者构建单页面应用（SPA）。但如果我们只需要一个简单的页面路由，而不想为此引入一整个路由库，可以通过动态组件的方式。
+
+#### 2.动态组件方式实现路由
+
+让我们以下面这段代码为例进行解释:
+
+```vue
+<script>
+import Home from './Home.vue';
+import About from './About.vue';
+import NotFound from './NotFound.vue';
+ 
+const routes = {
+  '/': Home,
+  '/about': About
+};
+ 
+export default {
+  data() {
+    return {
+      currentPath: window.location.hash.slice(1) || '/'
+    };
+  },
+  computed: {
+    currentView() {
+      return routes[this.currentPath] || NotFound;
+    }
+  },
+  mounted() {
+    window.addEventListener('hashchange', () => {
+      this.currentPath = window.location.hash.slice(1);
+    });
+  }
+};
+</script>
+ 
+<template>
+  <div>
+    <nav>
+      <a href="#/">Home</a> |
+      <a href="#/about">About</a> |
+      <a href="#/non-existent-path">Broken Link</a>
+    </nav>
+    <component :is="currentView" />
+  </div>
+</template>
+```
+
+##### （1）引入组件部分
+
+```javascript
+import Home from './Home.vue';
+import About from './About.vue';
+import NotFound from './NotFound.vue';
+```
+
+这部分代码导入了三个组件：Home.vue、About.vue 和 NotFound.vue。这些组件对应不同的页面视图。当用户导航到不同的路径时，将显示不同的组件。当然，我们要事先在对应的路径上创建好这三个组件。
+
+##### （2）定义路由对象
+
+```javascript
+const routes = {
+  '/': Home,
+  '/about': About
+};
+```
+
+`routes` 是一个简单的对象，用于将路径映射到组件。前面的键是路径字符串，后面的值是对应的组件。这意味着当路径为 '/' 时，将显示 Home 组件；当路径为 `'/about'` 时，将显示 About 组件。
+
+##### （3）data 选项
+
+```javascript
+data() {
+  return {
+    currentPath: window.location.hash.slice(1) || '/'
+  };
+}
+```
+
+data 返回了一个对象，包含了组件的响应式状态。这里的 `currentPath` 用于存储当前的路径。`window.location.hash.slice(1)` 是获取当前 URL 的 hash 值并去掉前面的 #。如果没有 hash，则默认返回 '/'。
+
+那么什么是 hash 呢？
+
+hash 是指 URL 中的一个片段，它以 # 开头，通常用来表示页面中的某个部分或状态。hash 是 URL 的一部分，但它不会被发送到服务器，因此不会触发页面的重新加载。例如一个典型的 URL 包含以下部分：`http://example.com/path/page.html#section`
+
+其中，`#section` 就是 hash。也就是说，hash 是 URL 的一部分，用于表示页面中的特定位置或状态。它不会触发页面重新加载，因此非常适合在单页面应用中实现无刷新导航和客户端路由。
+
+##### （4）computed 选项
+
+```javascript
+computed: {
+  currentView() {
+    return routes[this.currentPath] || NotFound;
+  }
+}
+```
+
+`computed` 定义了计算属性 `currentView`。它根据 `currentPath` 返回相应的组件。如果 `currentPath` 对应的路径在 `routes` 中存在，返回相应组件；如果不存在，返回 `NotFound` 组件。
+
+##### （5）mounted 生命周期钩子
+
+```javascript
+mounted() {
+  window.addEventListener('hashchange', () => {
+    this.currentPath = window.location.hash.slice(1);
+  });
+}
+```
+
+`mounted` 是我们前面刚刚讲到的 Vue 的生命周期钩子之一，表示组件已经挂载到 DOM 上。这里使用 `window.addEventListener` 监听 `hashchange` 事件。当 URL 的 `hash` 改变时，更新 `currentPath`，从而触发视图重新渲染。
+
+##### （6）模板部分
+
+```vue
+<template>
+  <div>
+    <nav>
+      <a href="#/">Home</a> |
+      <a href="#/about">About</a> |
+      <a href="#/non-existent-path">Broken Link</a>
+    </nav>
+    <component :is="currentView" />
+  </div>
+</template>
+```
+
+`<nav>`标签中定义了三个链接，点击这些链接会改变 URL 的 hash 部分，从而触发路径更新和视图切换。
+
+`<component :is="currentView" />` 是 Vue 的动态组件，用于根据 `currentView` 的值动态渲染不同的组件。
+
+##### （7）实现效果
+
+![img](https://i-blog.csdnimg.cn/direct/2d34a55ffdee402fa392476f0553a486.png)
+
+![img](https://i-blog.csdnimg.cn/direct/396a734353cc4f29a1dbdf1be8cf6d25.png)
+
+![img](https://i-blog.csdnimg.cn/direct/8b81b6ed2f32436192879faa85fe01cb.png)
+
+可以看到，当我们点击不同的链接时，会改变 URL 的 hash 部分，从而触发 Vue.js 应用中对应的组件显示。
+
+#### 3.Vue Router 实现路由
+
+相较于动态组件方式实现路由，Vue Router 提供了一种灵活且强大的方式来管理 Vue.js 应用中的路由，使得开发者能够创建复杂的单页面应用（SPA）。它支持动态路由、嵌套路由、懒加载组件和导航守卫等特性，能够简化页面导航逻辑、提高应用性能，并增强用户体验。通过集成 Vue Router，开发者可以更轻松地管理应用的视图状态，进行组件的动态切换，以及实现复杂的路由控制和权限管理。
+
+由于内容较多，就不在此处进行展开，读者如果感兴趣，可以自行前往官方文档：[Vue Router - Vue.js 的官方路由](https://router.vuejs.org/zh/) 了解更多关于 Vue Router 的使用方式和细节。
+
+### 三、Element Plus
+
+Vue.js 是一个高度组件化的前端框架。组件化是 Vue.js 的核心特性之一，它将用户界面分解成可重用的、独立的组件，使得开发和维护变得更加高效和组织化。相信通过前面的学习，大家对此应该也有所体会。既然是一个如此高度组件化的前端框架，那么有没有什么能够直接供我们使用的组件呢？
+
+这就是我们现在要介绍的 Element Plus 了：[Element Plus - 基于 Vue 3，面向设计师和开发者的组件库](https://element-plus.org/zh-CN/)
+
+Element Plus 是一个与 Vue 3 完美匹配的 UI 组件库，专门为构建现代网页应用设计。它提供了很多现成的组件，比如按钮、表单和对话框，让你可以轻松地用 Vue 的方式快速创建漂亮的界面。每个组件都封装了自己的样式和功能，像一个个积木块一样，方便你在不同地方重复使用。通过结合 Vue 的组件化特性，Element Plus 使得设计和维护界面变得更加简单和高效。
+
+善用 Element Plus 能够使我们的 Vue 项目开发事半功倍。
diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\233\233\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\212\357\274\211.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\233\233\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\212\357\274\211.md"
new file mode 100644
index 00000000..47a28c3c
--- /dev/null
+++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\345\255\246\344\271\240\347\254\224\350\256\260\357\274\210\345\233\233\357\274\211\357\274\232\346\267\261\345\205\245\344\272\206\350\247\243\347\273\204\344\273\266\357\274\210\344\270\212\357\274\211.md"	
@@ -0,0 +1,465 @@
+---
+title: Vue笔记
+date: 2024/9/16
+categories:
+ - fe
+author: aoxuexinghuo
+tags:
+ - Vue
+ - 手写笔记
+ - 前端框架
+---
+## Vue学习笔记（四）：深入了解组件（上）
+
+[TOC]
+
+### 一、组件基础
+
+#### 1.引子
+
+组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。当我们使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的`.vue`文件中，这被叫做单文件组件（简称 SFC）。实际上，我们前面的代码示例也都是在一个单独的组件内实现的。
+
+#### 2.组件组成结构
+
+一个最基本的组件，其组成结构如下：
+
+```vue
+<template>
+  <div>HTML标签</div>
+</template>
+ 
+<script>
+  export default {
+ 
+  }
+</script>
+ 
+<style scoped>
+ 
+</style>
+```
+
+- `<template>`用来承载所有的 HTML 标签；
+- `<script>`用于承载所有的业务逻辑；
+- `<style>`用于承载各种样式；
+
+可以看到，一个完整的 Vue 组件包含所有我们在网页上需要呈现的内容：HTML，JavaScript 以及 CSS。
+
+有些人可能会注意到这里的`<style>`标签里有一个`scoped`，它的作用是什么呢？
+
+答案很简单，`scoped`的作用是让当前样式只在当前组件中生效，如果不加`scoped`，这里的样式就为成为全局样式，对于任何组件都会生效，所以一般为了避免各个组件之间相互干扰，我们都会选择给`<style>`标签加上一个`scoped`，对其作用域进行限制。
+
+#### 3.组件的引用
+
+组件的引用分为三个步骤：
+
+首先，在`<script>`标签中使用 ES6 所提供的`import`去引入这个组件，格式为`import MyComponent from "./components.MyComponent.vue"`。前面的`MyComponent`是用户自己为所引入组件所起的名字，可以不与文件名相同，后面的引号内容则是所要引入组件的文件地址。然后，在`export default`中与`data`同级的`components`里注册组件。这个组件将会以其注册时的名字作为模板中的标签名。最后，我们在`<template>`中以标签的形式将组件显示出来。代码示例如下：
+
+```vue
+<template>
+  <!-- 第三步：显示组件 -->
+  <MyComponent/>
+</template>
+ 
+<script>
+  //第一步：引入组件
+  import MyComponent from "./components/MyComponent.vue"
+  //第二步：注册组件
+  export default {
+    components: {
+      MyComponent
+    }
+  }
+</script>
+```
+
+**注意事项：**
+
+1.这里的`<MyComponent/>`我们也可以写成`<my-component/>`，两者的关系是等价的。因为 Vue 支持将模板中使用 `kebab-case` 的标签解析为使用 `PascalCase` 注册的组件。
+
+2.同一个组件可以被我们使用多次，但要注意是，每一个组件都在维护着各自的状态，是不同的 count，因为每当我们使用一个组件，就创建了一个新的实例，具体理解有点类似于我们在 c++ 中学到的对象。
+
+### 二、组件嵌套关系
+
+在实际应用中，组件常常被我们组织成层层嵌套的树状结构：
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/f834aed42551ad7c2ca062e7d43dfe0b.png)
+
+上方这张图来自于官方文档，就让我们以这张图所提供的嵌套方式为例，进行页面创建：
+
+**App.vue:**
+
+```vue
+<template>
+  <Header/>
+  <Main/>
+  <Aside/>
+</template>
+ 
+<script>
+  import Header from "./pages/Header.vue"
+  import Main from "./pages/Main.vue"
+  import Aside from "./pages/Aside.vue"
+  export default {
+    components: {
+      Header,
+      Main,
+      Aside
+    }
+  }
+</script>
+```
+
+**Main.vue:**
+
+```vue
+<template>
+    <div class = "main">
+        <h3>Main</h3>
+        <Article/>
+        <Article/>
+    </div>
+</template>
+ 
+<script>
+    import Article from "./Article.vue"
+    export default {
+        components: {
+            Article
+        }
+    }
+</script>
+ 
+<style scoped>
+    .main {
+        float: left;
+        width: 70%;
+        height: 400px;
+        border: 5px solid DimGray;
+        box-sizing: border-box;
+        border-top: 0;
+        background-color:lightgray;
+    }
+</style>
+```
+
+**Article.vue:**
+
+```vue
+<template>
+    <h3>Article</h3>
+</template>
+ 
+<style scoped>
+    h3 {
+        width: 80%;
+        margin: 0 auto;
+        text-align: center;
+        line-height: 100px;
+        box-sizing: border-box;
+        margin-top: 50px;
+        background: #999;
+    }
+</style>
+```
+
+**Aside.vue:**
+
+```vue
+<template>
+    <div class = "aside">
+        <h3>Aside</h3>
+        <Item/>
+        <Item/>
+        <Item/>
+    </div>
+</template>
+ 
+<script>
+    import Item from "./Item.vue"
+    export default {
+        components: {
+            Item
+        }
+    }
+</script>
+ 
+<style>
+    .aside {
+        float: right;
+        width: 30%;
+        height: 400px;
+        border: 5px solid DimGray;
+        box-sizing: border-box;
+        border-left: 0;
+        border-top: 0;
+        background-color:lightgray;
+    }
+</style>
+```
+
+**Item.vue:**
+
+```vue
+<template>
+    <h3>Item</h3>
+</template>
+ 
+<style scoped>
+    h3 {
+        width: 80%;
+        margin: 0 auto;
+        text-align: center;
+        line-height: 100px;
+        box-sizing: border-box;
+        margin-top: 10px;
+        background-color: #999;
+    }
+</style>
+```
+
+这里我们单独建立了一个 pages 网页用于存储各个组件，读者可根据实际情况自行调整文件路径。最后我们就能得到如下的网页了，怎么样，是不是和官方文档的图片很像呢？记得要仔细观察各个组件之间的嵌套逻辑以及嵌套实现方式哦！
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/e9c21049f7f53ce7f710bfaef6ace455.png)
+
+### 三、组件注册方式
+
+一个 Vue 组件在被我们使用前需要先被“注册”，这样 Vue 才能在渲染模版的时候找到其对应的实现，组件的注册方式有两种：全局注册和局部注册。
+
+#### 1.全局注册
+
+一般情况下，我们使用 Vue 应用实例的`.component()`方法来让组件全局可用，打开我们项目中的`main.js`文件，我们会发现它存在下面这样的默认内容：
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+ 
+createApp(App).mount('#app')
+```
+
+我们首先使用`import`将组件文件引入，接着将此处的`createApp(App).mount('#app')`拆分为两部分，最后在他们之间写入我们要全局注册的内容：
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import Header from './pages/Header.vue'
+ 
+const app = createApp(App)
+//在此处写组件的注册
+app.component("Header",Header)
+ 
+app.mount('#app')
+```
+
+ 这里的`app.component("Header",Header)`中第一个`"Header"`是我们为注册的组件取得变量名，即日后我们引入该组件时使用的名字，第二个`Header`则是我们要所注册的组件的名字。通过这种方式注册的组件就可以直接在全局中使用了。
+
+`.component()`方法也可以被链式调用：
+
+```js
+app
+  .component("Header", Header)
+  .component("Main", Main)
+  .component("Aside", Aside)
+```
+
+#### 2.局部注册
+
+实际上，前面我们讲到的组件的引用就是采用的局部注册方式。对于局部注册，我们要注意的是，**局部注册的组件在其后代组件中不可用**，只能使用于当前组件。与局部注册相比，全局注册似乎有着天然的优势，那么我们为什么又要选择局部注册呢？前者的劣势又是什么呢？
+
+#### 3.全局注册的劣势
+
+1. 全局注册，但没有被使用的组件无法在生产打包时被自动移除（也叫做 tree-shaking），仍然会出现在打包后的 JS 文件中。
+2. 全局注册在大型项目中使项目的依赖关系变得不这么明确，在父组件中使用子组件时，不容易定位子组件的实现，和使用过多的全局变量一样，可能会影响应用长期的可维护性。
+
+与之相对应的也就是局部注册的优势啦，这里就不再一一赘述。 
+
+### 四、组件传递数据（Props）
+
+#### 1.Props 传递静态数据
+
+我们先创建出有着嵌套关系的Parent和Child文件，然后结合示例代码详细讲解数据传递的过程：
+
+**Parent.vue:**
+
+```vue
+<template>
+    <h3>Parent</h3>
+    <Child test = "雷希拉姆"/>
+</template>
+ 
+<script>
+    import Child from "./Child.vue"
+    export default {
+        components: {
+            Child
+        }
+    }
+</script>
+```
+
+ **Child.vue:**
+
+```vue
+<template>
+    <h3>Child</h3>
+    <p>{{ test }}</p>
+</template>
+ 
+<script>
+    export default {
+        props: ["test"]
+    }
+</script>
+```
+
+首先我们在Parent文件的`<Child/>`标签中以`key = value`的形式写下我们想要传递给 Child 的数据，然后在 Child 的`props`中接收数据，注意这里要以数组的形式，且`key`要加双引号。之后，我们就可以在 Child 文件中正常使用该数据了。
+
+实际上`props`能够传递任何数据类型，包括数字，字符串，数组，对象等。
+
+**props 也支持同时传递多个数据：**
+
+```vue
+Parent文件：
+    <Child test1 = "雷希拉姆" test2 = "捷克罗姆"/>
+ 
+Child文件：
+    props: ["test1", "test2"]
+```
+
+#### 2.props 传递动态数据
+
+```vue
+<template>
+    <h3>Parent</h3>
+    <Child :test = "message"/>
+</template>
+ 
+<script>
+    import Child from "./Child.vue"
+    export default {
+        data() {
+            return {
+                message: "雷希拉姆"
+            }
+        },
+        components: {
+            Child
+        }
+    }
+</script>
+```
+
+
+要注意`Props`传递动态数据时，我们需要借助`v-bind`指令，这里我们采用的是其简写形式。
+
+#### 3.使用一个对象绑定多个 prop
+
+如果我们想要将一个对象的所有属性都当作 props 传入，可以选择使用没有参数的`v-bind`，即只使用`v-bind`而非`: prop-name`。示例如下：
+
+存在对象：
+
+```vue
+  pika: {
+    id: 25,
+    color: yellow
+  }
+```
+我们可以使用以下方式为其每一个属性都绑定一个`prop`
+
+```vue
+<Child v-bind = "pika" />
+```
+
+这种实现方式实际上等价于：
+
+```vue
+<Child :id = "pika.id" :title = "pika.title" />
+```
+
+#### 4. 单向数据流
+
+所有的props都遵循着单向绑定的原则，即只能父组件给子组件传递数据，不能反其道而行之。这样`props`因父组件的更新而变化，自然地就会将新的状态向下流往子组件，而不会逆向传递，避免了子组件意外修改父组件的状态。（当然，我们其实还是有方法实现逆向传递数据的，这点我们后面会讲到）
+
+其次，`pros`是只读的，这也就意味着我们不能在子组件中去更改一个`prop`，否则 Vue 会在程序台上报错。
+
+#### 5.Prop 校验
+
+Vue 组件可以更加细致地声明对传入的`props`的校验要求：
+
+```vue
+<template>
+    <h3>Child</h3>
+    <p>{{ test }}</p>
+</template>
+ 
+<script>
+    export default {
+        props: {
+            test: {
+                type: Number
+            }
+        }
+    }
+</script>
+```
+
+ 上面这段代码的含义就是要求接受到的`test`的数据类型为`Number`（注意此处的 N 要大写，否则会显示`number`未定义），如果不是`Number`类型，控制台就会出现警告。 
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/b15105112fc24871fe0c6ddadf6d4254.png)
+
+ 同样的`Prop`还能校验`String`，`Array`，`Object`等数据类型，此外还能兼容多个数据类型，例如：
+
+```js
+type: [Number, String, Array]
+```
+
+ 表示允许接受的数据类型为这三种的任何一种。
+
+#### 6.默认值
+
+有时候我们在子组件中选择接收某个数据，但是实际上父组件并没有传递该数据，这时网页上将会直接不显示该数据，而当网页的内容多起来时我们往往很难注意到这一点。想要解决这个问题我们可以通过设置默认值的方式来填补这块空白，以便我们观察或达成格式的统一。
+
+```vue
+<template>
+    <h3>Child</h3>
+    <p>{{ test }}</p>
+</template>
+ 
+<script>
+    export default {
+        props: {
+            test: {
+                type: [Number, String, Array],
+                default: "未接收"
+            }
+        }
+    }
+</script>
+```
+
+此时，我们取消父组件的数据传递，我们发现，原本应该出现“雷希拉姆”（原`test`数据内容）的地方变成了我们设置的默认值：未接收。
+
+需要注意的是，如果默认值是字符串或者数字，我们可以直接写在`default:` 的后面，但如果是数组或对象，我们必须通过函数返回值的形式来设置默认值。例如：
+
+```vue
+default() {
+    return ["雷希拉姆", "捷克罗姆"]
+}
+```
+
+#### 7.必选项
+
+在上一小节中我们了解到当子组件没有接受到来自父组件的数据时，会选择直接不在页面中显示对应模块，我们可以通过设置必选项的方式来让某个数据必须被接收到，否则控制台就会弹出警告。具体实现方式如下：
+
+```vue
+    export default {
+        props: {
+            test: {
+                type: [Number, String, Array],
+                required: true
+            }
+        }
+    }
+```
+
+![img](https://i-blog.csdnimg.cn/blog_migrate/cc9c3b3227cc1ed676e373d7666db17e.png)
\ No newline at end of file
diff --git "a/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\347\216\257\345\242\203\351\205\215\347\275\256\357\274\210Windows\357\274\211.md" "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\347\216\257\345\242\203\351\205\215\347\275\256\357\274\210Windows\357\274\211.md"
new file mode 100644
index 00000000..a2cd1fad
--- /dev/null
+++ "b/blogs/frontEnd/Vue \345\255\246\344\271\240\347\254\224\350\256\260/Vue\347\216\257\345\242\203\351\205\215\347\275\256\357\274\210Windows\357\274\211.md"	
@@ -0,0 +1,84 @@
+---
+title: Vue笔记
+date: 2024/9/16
+categories:
+ - fe
+author: aoxuexinghuo
+tags:
+ - Vue
+ - 手写笔记
+ - 前端框架
+---
+## Vue环境配置（Windows）
+
+### 一、node.js安装配置
+
+ vue的使用需要以node.js为前提，如果您的电脑上已经安装了node.js，可直接跳过这一步。
+
+ 我们可以在终端（win+r，然后输入cmd打开终端）中输入`node -v`来查询电脑上是否已经安装node.js以及版本号。如下图显示，我的电脑上目前已经安装了node.js，且版本号为20.12.0。
+
+![img](https://i-blog.csdnimg.cn/direct/bb205df1f7b446c6beeef04150da09cc.png)
+
+node.js的下载地址为：[Node.js — 在任何地方运行 JavaScript](https://nodejs.org/zh-cn)
+
+下载完成后打开刚刚下载的文件：
+
+![img](https://i-blog.csdnimg.cn/direct/3a2dc700e6c644ec99cf89459334c941.png)
+
+选择安装路径：
+
+![img](https://i-blog.csdnimg.cn/direct/d895540949194c2baf2a6cdf9015b8d8.png)
+
+选择我们需要的安装模式（注意此处要手动修改）：
+
+![img](https://i-blog.csdnimg.cn/direct/be968c5817f34a59a0e11e6ca046f775.png)
+
+手动勾选此处的自动安装必要工具项（用于安装一些额外的开发工具和依赖）：
+
+![img](https://i-blog.csdnimg.cn/direct/1c78ca5ed4a44cb2b65e2d94201742c8.png)
+
+选择安装：
+
+![img](https://i-blog.csdnimg.cn/direct/b93c4b74632e4d27947c8eea7226bd2b.png)
+
+安装完成：
+
+![img](https://i-blog.csdnimg.cn/direct/f9921be5422947f0abc800a2d95b79e4.png)
+
+ 然后我们可以使用前面提到的的方式，在终端中输入`node -v`来检查node.js是否成功安装。
+
+### 二、NPM方法安装Vue
+
+由于 npm 安装速度慢，因此我们在下载时选择使用淘宝镜像及其命令 cnpm。
+
+首先在电脑上**全局安装cnpm**。
+
+打开电脑终端，输入指令`npm install -g cnpm --registry=https://registry.npmmirror.com`。下载完成后输入`cnpm -v`进行检查。
+
+![img](https://i-blog.csdnimg.cn/direct/5b38535fbd3f4e19b7d7c8ed66c22fc4.png)
+
+注：cnpm是由淘宝NPM镜像提供的一个npm的镜像服务客户端，用于在中国大陆地区加速npm包的安装，因为直接使用npm在国内有时候会比较慢。cnpm和npm命令的用法几乎完全相同，所以我们可以无缝切换使用。
+
+然后我们就可以输入`cnpm init vue@latest`来创建一个vue项目。它使用了Vue团队推荐的最新项目模板，提供了一种无需全局安装Vue CLI的方式来创建Vue项目，更加简单快捷。当然，你可以先选择好该项目的路径。
+
+![img](https://i-blog.csdnimg.cn/direct/f5f8a203313c46bb9f4f93ed0ddf146f.png)
+
+初次创建时，会询问我们是否下载对应的依赖项，我们输入y后回车即可。
+
+其余设置无特殊要求，输入项目名称后，一路回车，保持默认即可。
+
+然后我们依次输入他为我们提供的三条指令：
+
+`cd vue-project`     进入我们的vue项目目录，这里的vue-project为项目名称。
+
+`cnpm install`      安装项目所需的依赖项，使用cnpm下载速度更快。
+
+`npm run dev`      启动项目的开发服务器
+
+![img](https://i-blog.csdnimg.cn/direct/d12e0cd7d8d543308417a47a0a440756.png)
+
+上图显示项目启动成功，运行在`http:// localhost:5173`。我们将网址复制，在浏览器中打开。
+
+![img](https://i-blog.csdnimg.cn/direct/d157c84552fe44038a18b9c3fba76a63.png)
+
+现在，你就成功创建了一个你自己的Vue项目模板， 你可以按照自己的想法对各个模块进行修改。
\ No newline at end of file
diff --git "a/docs/frontEnd/\345\244\247\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210.md" "b/docs/frontEnd/\345\244\247\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210.md"
index 512b97ad..dfe85fab 100644
--- "a/docs/frontEnd/\345\244\247\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210.md"
+++ "b/docs/frontEnd/\345\244\247\345\211\215\347\253\257\346\212\200\346\234\257\346\240\210.md"
@@ -153,7 +153,20 @@ author: SimonWuzy
 		
 	- 环境配置入门
 		
-	- 待补充…………
+	- 基本语法
+
+    - 组件介绍
+
+	- 学习资料：
+		- [环境配置-node.js](https://www.runoob.com/nodejs/nodejs-install-setup.html)
+
+		- [Vue官方文档](https://cn.vuejs.org/guide/introduction)
+      
+        - [Vue官方路由](https://router.vuejs.org/zh/)
+
+		- [前端绘图-chart.js](https://router.vuejs.org/zh/)
+      
+        - [axios](https://axios-http.com/zh/docs/intro)
 		
 - 微信小程序