diff --git "a/\350\256\270\345\205\260\350\216\271/\347\254\224\350\256\260/0513\345\244\215\344\271\240vue+pinia.md" "b/\350\256\270\345\205\260\350\216\271/\347\254\224\350\256\260/0513\345\244\215\344\271\240vue+pinia.md"
new file mode 100644
index 0000000000000000000000000000000000000000..013973ffb3fbc830896ca4f50daa76812185be13
--- /dev/null
+++ "b/\350\256\270\345\205\260\350\216\271/\347\254\224\350\256\260/0513\345\244\215\344\271\240vue+pinia.md"
@@ -0,0 +1,61 @@
+#### 1\. 什么是Pinia？
+
+Pinia是Vue.js的一个状态管理库，可以帮助你管理应用程序的状态。它是Vuex的下一代状态管理库，提供了更简单、更强大的API。
+
+#### 2\. 为什么使用Pinia？
+
+使用Pinia可以让你更好地管理应用程序的状态，从而提高应用程序的可维护性和可扩展性。它提供了一种更简单的方式来管理状态，并且与Vue.js的生态系统更好地集成。
+
+#### 3\. 如何使用Pinia？
+
+使用Pinia需要先安装它，可以使用npm或yarn进行安装。安装完成后，可以在Vue.js应用程序中使用它。
+
+首先，需要创建一个Pinia实例，并在其中定义状态和行为。可以使用`defineStore`函数创建一个状态模块，并在其中定义状态和行为。例如：
+```js
+    import { defineStore } from 'pinia'
+    
+    export const useCounterStore = defineStore({
+      id: 'counter',
+      state: () => ({
+        count: 0,
+      }),
+      actions: {
+        increment() {
+          this.count++
+        },
+      },
+    })
+```    
+
+在这个示例中，我们创建了一个名为`counter`的状态模块，它有一个名为`count`的状态，以及一个名为`increment`的行为。
+
+然后，可以在Vue.js组件中使用这个状态模块，例如：
+```vue
+    <template>
+      <div>
+        <p>Count: {{ count }}</p>
+        <button @click="increment">Increment</button>
+      </div>
+    </template>
+    
+    <script>
+    import { useCounterStore } from './store'
+    
+    export default {
+      setup() {
+        const store = useCounterStore()
+    
+        return {
+          count: store.count,
+          increment: store.increment,
+        }
+      },
+    }
+    </script>
+```    
+
+在这个示例中，我们在Vue.js组件中使用了`useCounterStore`函数，获取了`counter`状态模块的实例，并在模板中使用了它的`count`和`increment`属性。
+
+#### 4\. 总结
+
+Pinia是Vue.js的一个状态管理库，可以帮助你管理应用程序的状态。它提供了一种更简单、更强大的API，并与Vue.js的生态系统更好地集成。通过使用Pinia，你可以更好地管理应用程序的状态，从而提高应用程序的可维护性和可扩展性。
\ No newline at end of file
diff --git "a/\350\256\270\345\205\260\350\216\271/\347\254\224\350\256\260/0514vue\345\244\215\344\271\240.md" "b/\350\256\270\345\205\260\350\216\271/\347\254\224\350\256\260/0514vue\345\244\215\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..192531bbed20b4ed43e3aa7c37507b041eea61df
--- /dev/null
+++ "b/\350\256\270\345\205\260\350\216\271/\347\254\224\350\256\260/0514vue\345\244\215\344\271\240.md"
@@ -0,0 +1,232 @@
+### 组件
+
+组件是 Vue 应用中的基本构建块，可以重复使用，封装了HTML、CSS和JavaScript。组件可以嵌套使用，形成组件树。
+
+**用法**:
+```vue
+    <template>
+      <div>
+        <button @click="increment">{{ count }}</button>
+      </div>
+    </template>
+    
+    <script>
+    export default {
+      data() {
+        return {
+          count: 0
+        };
+      },
+      methods: {
+        increment() {
+          this.count++;
+        }
+      }
+    };
+    </script>
+```
+
+**使用场景**: 任何需要封装UI逻辑的地方。
+
+### 插槽（Slots）
+
+插槽允许父组件向子组件传递内容。这使得组件更加灵活和可复用。
+
+**用法**:
+```vue
+    <!-- 子组件 -->
+    <template>
+      <div>
+        <slot></slot>
+      </div>
+    </template>
+    
+    <!-- 父组件 -->
+    <template>
+      <ChildComponent>
+        <p>这是传递给子组件的内容</p>
+      </ChildComponent>
+    </template>
+```
+
+**使用场景**: 当需要从父组件向子组件传递动态内容时。
+
+### 组合式API（Composition API）
+
+组合式API是Vue 3中引入的一种新的编写组件的方式，它允许开发者根据逻辑相关性组织代码，提高代码的可读性和可维护性。
+
+**用法**:
+```vue
+    <template>
+      <div>
+        <button @click="increment">{{ state.count }}</button>
+      </div>
+    </template>
+    
+    <script>
+    import { ref } from 'vue';
+    
+    export default {
+      setup() {
+        const state = ref({ count: 0 });
+        const increment = () => {
+          state.value.count++;
+        };
+        return {
+          state,
+          increment
+        };
+      }
+    };
+    </script>
+```
+
+**使用场景**: 当组件逻辑复杂，需要更好的代码组织和复用时。
+
+### 选项式API（Options API）
+
+选项式API是Vue 2中传统的编写组件的方式，通过在组件对象中定义不同的选项（如data、methods、computed等）来组织代码。
+
+**用法**:
+```vue
+    <template>
+      <div>
+        <button @click="increment">{{ count }}</button>
+      </div>
+    </template>
+    
+    <script>
+    export default {
+      data() {
+        return {
+          count: 0
+        };
+      },
+      methods: {
+        increment() {
+          this.count++;
+        }
+      }
+    };
+    </script>
+```
+
+**使用场景**: 当组件逻辑相对简单，或者从Vue 2迁移时。
+
+### 指令（Directives）
+
+指令是带有`v-`前缀的特殊属性，用于在DOM元素上附加特殊的响应式行为。
+
+#### v-if
+
+**用法**:
+```vue
+    <template>
+      <div v-if="show">这段文字将在show为true时显示</div>
+    </template>
+    
+    <script>
+    export default {
+      data() {
+        return {
+          show: true
+        };
+      }
+    };
+    </script>
+```
+
+**使用场景**: 当需要对元素的显示和隐藏进行动态控制时。
+
+#### v-for
+
+**用法**:
+```vue
+    <template>
+      <ul>
+        <li v-for="item in list" :key="item.id">{{ item.name }}</li>
+      </ul>
+    </template>
+    
+    <script>
+    export default {
+      data() {
+        return {
+          list: [
+            { id: 1, name: 'Item 1' },
+            { id: 2, name: 'Item 2' },
+            { id: 3, name: 'Item 3' }
+          ]
+        };
+      }
+    };
+    </script>
+```
+
+**使用场景**: 当需要循环渲染元素列表时。
+
+#### v-on
+
+**用法**:
+```vue
+    <template>
+      <button @click="handleClick">点击</button>
+    </template>
+    
+    <script>
+    export default {
+      methods: {
+        handleClick() {
+          console.log('Button clicked');
+        }
+      }
+    };
+    </script>
+    
+```
+
+**使用场景**: 当需要在元素上监听事件时。
+
+#### v-model
+
+**用法**:
+```vue
+    <template>
+      <input v-model="message" placeholder="输入一些文字">
+      <p>{{ message }}</p>
+    </template>
+    
+    <script>
+    export default {
+      data() {
+        return {
+          message: ''
+        };
+      }
+    };
+    </script>
+    
+```
+
+**使用场景**: 当需要在表单元素和数据之间建立双向数据绑定时。
+
+#### v-bind
+
+**用法**:
+```vue
+    <template>
+      <div :class="{ active: isActive }">...</div>
+    </template>
+    
+    <script>
+    export default {
+      data() {
+        return {
+          isActive: true
+        };
+      }
+    };
+    </script>
+```
+
+**使用场景**: 当需要动态绑定元素属性时。
\ No newline at end of file