From 1f240c2cfcd848943b7889e3a7281d1afa8a0b20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E5=B0=8F=E7=87=95?= <gxy255229@qq.com>
Date: Sun, 13 Apr 2025 16:58:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20250407 Vue\345\205\245\351\227\250.md"  | 33 +++++++++
 .../20250408 Vue3\351\241\271\347\233\256.md" | 27 ++++++++
 ...14\351\200\211\351\241\271\345\274\217.md" | 54 +++++++++++++++
 ...41\346\235\277\350\257\255\346\263\225.md" | 67 +++++++++++++++++++
 4 files changed, 181 insertions(+)
 create mode 100644 "\351\203\255\345\260\217\347\207\225/20250407 Vue\345\205\245\351\227\250.md"
 create mode 100644 "\351\203\255\345\260\217\347\207\225/20250408 Vue3\351\241\271\347\233\256.md"
 create mode 100644 "\351\203\255\345\260\217\347\207\225/20250409 \347\273\204\345\220\210\345\274\217\357\274\214\351\200\211\351\241\271\345\274\217.md"
 create mode 100644 "\351\203\255\345\260\217\347\207\225/20250411 \346\250\241\346\235\277\350\257\255\346\263\225.md"

diff --git "a/\351\203\255\345\260\217\347\207\225/20250407 Vue\345\205\245\351\227\250.md" "b/\351\203\255\345\260\217\347\207\225/20250407 Vue\345\205\245\351\227\250.md"
new file mode 100644
index 0000000..eeafd76
--- /dev/null
+++ "b/\351\203\255\345\260\217\347\207\225/20250407 Vue\345\205\245\351\227\250.md"	
@@ -0,0 +1,33 @@
+Vue 3 是 Vue.js 框架的最新版本，于 2020 年 9 月正式发布。以下是关于 Vue 3 的详细介绍：
+
+### 核心特性
+
+- **性能提升**：Vue 3 重写了虚拟 DOM，优化了 diff 算法，使初始渲染速度提升了 55%，更新速度提升了 133%。同时，响应式系统的内存占用也得到了优化。
+- **组合式 API（Composition API）**：这是 Vue 3 的重要特性之一，它允许开发者将逻辑按功能组织，而不是按选项（data、methods 等）组织，从而更好地复用逻辑。此外，组合式 API 对 TypeScript 的支持更加友好。
+- **全新的响应式系统**：Vue 3 使用 ES6 的 `Proxy` 替代了 Vue 2 的 `Object.defineProperty`，解决了 Vue 2 中无法检测数组和对象属性变化的问题。基于 Proxy 的响应式系统可以更精确地追踪依赖关系，减少不必要的更新。
+- **新的内置组件**：Vue 3 引入了 `<Teleport>` 和 `<Suspense>` 两个新的内置组件。`<Teleport>` 允许将组件渲染到 DOM 中的任意位置，常用于模态框、通知等场景；`<Suspense>` 用于处理异步组件的加载状态，提供更好的用户体验。
+- **Fragment 支持**：Vue 3 支持多根节点组件（Fragment），不再强制要求组件必须有一个根元素。
+- **更好的 TypeScript 支持**：Vue 3 完全使用 TypeScript 重写，提供了更好的类型推断和类型支持。
+- **更小的包体积**：通过 Tree-shaking 支持，Vue 3 的核心代码体积减少了 40% 以上。
+
+### 生态系统
+
+Vue 3 的生态系统非常丰富，以下是一些常用的工具和库：
+
+- **Vite**：新一代构建工具，支持 Vue 3，提供极快的开发体验。
+- **Vue DevTools**：浏览器扩展，用于调试 Vue 应用。
+- **Vue Test Utils**：Vue 3 的官方测试工具。
+- **Element Plus**：基于 Vue 3 的 UI 组件库。
+- **Vant**：轻量级的移动端组件库。
+
+### 与 Vue 2 的区别
+
+| 特性            | Vue 2                        | Vue 3                      |
+| --------------- | ---------------------------- | -------------------------- |
+| 响应式系统      | 基于 `Object.defineProperty` | 基于 `Proxy`               |
+| 组合式 API      | 无                           | 支持组合式 API             |
+| 性能            | 较慢                         | 更快（渲染速度快 2 倍）    |
+| 包体积          | 较大                         | 更小（Tree-shaking 支持）  |
+| TypeScript 支持 | 有限                         | 完全支持                   |
+| 内置组件        | 无                           | `<Teleport>`、`<Suspense>` |
+| 多根节点支持    | 不支持                       | 支持                       |
\ No newline at end of file
diff --git "a/\351\203\255\345\260\217\347\207\225/20250408 Vue3\351\241\271\347\233\256.md" "b/\351\203\255\345\260\217\347\207\225/20250408 Vue3\351\241\271\347\233\256.md"
new file mode 100644
index 0000000..18d0e53
--- /dev/null
+++ "b/\351\203\255\345\260\217\347\207\225/20250408 Vue3\351\241\271\347\233\256.md"	
@@ -0,0 +1,27 @@
+#### 1.vue安装
+
+```bash
+//使用npm安装yarn
+npm i -g yarn
+//安装vue
+yarn add vue
+```
+
+#### 2.创建vue项目
+
+```bash
+yarn create vue
+```
+
+#### 3.安装依赖
+
+```bash
+yarn
+```
+
+#### 4.运行
+
+```bash
+yarn dev
+```
+
diff --git "a/\351\203\255\345\260\217\347\207\225/20250409 \347\273\204\345\220\210\345\274\217\357\274\214\351\200\211\351\241\271\345\274\217.md" "b/\351\203\255\345\260\217\347\207\225/20250409 \347\273\204\345\220\210\345\274\217\357\274\214\351\200\211\351\241\271\345\274\217.md"
new file mode 100644
index 0000000..408eee3
--- /dev/null
+++ "b/\351\203\255\345\260\217\347\207\225/20250409 \347\273\204\345\220\210\345\274\217\357\274\214\351\200\211\351\241\271\345\274\217.md"	
@@ -0,0 +1,54 @@
+## 选项式
+
+```base
+<template>
+  <div>
+    <h1>{{ msg }}</h1>
+    <button @click="cl">这是按钮</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      msg: 'Hello Vue.js!'
+    };
+  },
+  methods: {
+    cl() {
+      this.msg = '你好 Vue!';
+    }
+  }
+};
+</script>
+```
+
+## 组合式
+```base
+<template>
+  <div>
+    <h1>{{ msg }}</h1>
+    <button @click="cl">这是按钮</button>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const msg = ref('Hello Vue.js!');
+
+    function cl() {
+      msg.value = '你好 Vue!';
+    }
+
+    return {
+      msg,
+      cl
+    };
+  }
+};
+</script>
+```
\ No newline at end of file
diff --git "a/\351\203\255\345\260\217\347\207\225/20250411 \346\250\241\346\235\277\350\257\255\346\263\225.md" "b/\351\203\255\345\260\217\347\207\225/20250411 \346\250\241\346\235\277\350\257\255\346\263\225.md"
new file mode 100644
index 0000000..f5e3f3c
--- /dev/null
+++ "b/\351\203\255\345\260\217\347\207\225/20250411 \346\250\241\346\235\277\350\257\255\346\263\225.md"	
@@ -0,0 +1,67 @@
+##### 文本插值
+
+```html
+<p>{{ msg }}</p>
+
+//支持表达式
+{{ number + 1 }}
+
+{{ ok ? 'YES' : 'NO' }}
+
+{{ message.split('').reverse().join('') }}
+```
+
+##### v-html
+
+```html
+<p v-html=""></p>
+```
+
+##### v-bind
+
+```html
+<p v-bind:id=""></p>
+
+<p :id=""></p>
+
+绑定多个值
+
+<div v-bind="objectOfAttrs"></div>
+
+data() {
+  return {
+    objectOfAttrs: {
+      id: 'container',
+      class: 'wrapper'
+    }
+  }
+}
+```
+
+##### v-on
+
+```html
+<a v-on:click=""></a>
+
+<a @click=""></a>
+```
+
+##### v-for
+
+```html
+<li v-for="item in items">{{ item.text }}</li>
+```
+
+##### v-if
+
+```html
+<div v-if="">你好</div>
+```
+
+##### v-else配合v-if使用
+
+```html
+<div v-if="">你好</div>
+<div v-else>请登录</div>
+```
+
-- 
Gitee