From b63e1d2c875dda855ab2190cb4c1abbcb3e499d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=86=AF=E5=B9=BF=E6=81=BA?= <1332727966@qq.com>
Date: Mon, 27 Apr 2026 00:09:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20260220.md"                              |  71 +++++++++++++
 .../20260222.md"                              |  86 +++++++++++++++
 .../20260223.md"                              |  98 +++++++++++++++++
 .../20260224.md"                              | 100 ++++++++++++++++++
 4 files changed, 355 insertions(+)
 create mode 100644 "\345\206\257\345\271\277\346\201\272/20260220.md"
 create mode 100644 "\345\206\257\345\271\277\346\201\272/20260222.md"
 create mode 100644 "\345\206\257\345\271\277\346\201\272/20260223.md"
 create mode 100644 "\345\206\257\345\271\277\346\201\272/20260224.md"

diff --git "a/\345\206\257\345\271\277\346\201\272/20260220.md" "b/\345\206\257\345\271\277\346\201\272/20260220.md"
new file mode 100644
index 0000000..2431701
--- /dev/null
+++ "b/\345\206\257\345\271\277\346\201\272/20260220.md"
@@ -0,0 +1,71 @@
+# Vue.js 入门 Day 1：基础概念与模板语法
+
+## 核心概念
+
+### Vue 实例
+
+```javascript
+// 创建并挂载 Vue 实例
+const app = Vue.createApp({
+  data() {
+    return { 
+      message: 'Hello Vue!' 
+    }
+  }
+}).mount('#app')
+```
+
+## 常用指令
+
+| 指令 | 作用 | 示例 |
+|------|------|------|
+
+| `{{ }}` | 文本插值 | `{{ message }}` |
+| `v-bind` | 动态绑定属性 | `v-bind:href="url"` |
+| `v-on` | 绑定事件监听 | `v-on:click="handler"` |
+| `v-model` | 表单双向绑定 | `v-model="inputValue"` |
+
+## 简写语法
+
+```html
+<!-- v-bind 简写（:） -->
+<img :src="imgUrl">
+
+<!-- v-on 简写（@） -->
+<button @click="handleClick">点击</button>
+```
+
+## 示例代码
+
+```html
+<div id="app">
+  <h1>{{ title }}</h1>
+  <input v-model="name" placeholder="输入姓名">
+  <p>你好，{{ name }}！</p>
+  <button @click="sayHello">问候</button>
+</div>
+
+<script>
+Vue.createApp({
+  data() {
+    return {
+      title: 'Vue 入门',
+      name: ''
+    }
+  },
+  methods: {
+    sayHello() {
+      alert(`Hello ${this.name || 'Vue'}`)
+    }
+  }
+}).mount('#app')
+</script>
+```
+
+## 今日要点
+
+- ✅ 创建 Vue 实例并挂载
+- ✅ 掌握插值表达式 `{{ }}`
+- ✅ 熟悉 `v-bind`、`v-on`、`v-model`
+- ✅ 了解指令简写语法
+\ No newline at end of file
\ No newline at end of file
diff --git "a/\345\206\257\345\271\277\346\201\272/20260222.md" "b/\345\206\257\345\271\277\346\201\272/20260222.md"
new file mode 100644
index 0000000..6b3e1fb
--- /dev/null
+++ "b/\345\206\257\345\271\277\346\201\272/20260222.md"
@@ -0,0 +1,86 @@
+# Vue.js 入门 Day 2：响应式与计算属性
+
+## 响应式数据
+
+Vue 会自动追踪数据变化并更新视图：
+
+```javascript
+Vue.createApp({
+  data() {
+    return { 
+      count: 0,
+      user: { name: 'Vue' }
+    }
+  },
+  methods: {
+    increment() {
+      this.count++           // 自动触发视图更新
+      this.user.name = 'Vue3' // 嵌套属性也响应
+    }
+  }
+})
+```
+
+## 计算属性（computed）
+
+**有缓存**，依赖不变时不重新计算：
+
+```javascript
+computed: {
+  // 完整写法
+  fullName: {
+    get() {
+      return this.firstName + ' ' + this.lastName
+    },
+    set(value) {
+      const parts = value.split(' ')
+      this.firstName = parts[0]
+      this.lastName = parts[1]
+    }
+  },
+  // 简写（只读）
+  upperMessage() {
+    return this.message.toUpperCase()
+  }
+}
+```
+
+## 方法（methods）
+
+**无缓存**，每次调用都执行：
+
+```javascript
+methods: {
+  getFullName() {
+    return this.firstName + ' ' + this.lastName  // 每次调用都重新计算
+  }
+}
+```
+
+## 侦听器（watch）
+
+监听数据变化，执行异步或开销较大的操作：
+
+```javascript
+watch: {
+  // 简单监听
+  count(newVal, oldVal) {
+    console.log(`count从 ${oldVal} 变为 ${newVal}`)
+  },
+  // 深度监听对象
+  user: {
+    handler(newVal) {
+      console.log('user变化', newVal)
+    },
+    deep: true,
+    immediate: true  // 立即执行
+  }
+}
+```
+
+## 今日要点
+
+- ✅ 理解 Vue 响应式原理
+- ✅ 区分 computed 和 methods
+- ✅ 掌握 watch 的使用场景
+\ No newline at end of file
\ No newline at end of file
diff --git "a/\345\206\257\345\271\277\346\201\272/20260223.md" "b/\345\206\257\345\271\277\346\201\272/20260223.md"
new file mode 100644
index 0000000..5267047
--- /dev/null
+++ "b/\345\206\257\345\271\277\346\201\272/20260223.md"
@@ -0,0 +1,98 @@
+# **文件 3：Vue.js_Day3_条件循环与组件.md**
+
+```markdown
+# Vue.js 入门 Day 3：条件/循环与组件
+
+## 条件渲染
+
+```html
+<!-- v-if：条件为真时渲染 -->
+<div v-if="type === 'A'">A类型</div>
+<div v-else-if="type === 'B'">B类型</div>
+<div v-else>其他类型</div>
+
+<!-- v-show：始终存在，通过CSS切换 -->
+<div v-show="isVisible">始终渲染，切换display</div>
+```
+
+## **v-if vs v-show**
+
+| 指令 | 特点 | 适用场景 |
+|------|------|----------|
+
+| `v-if` | 真正的条件渲染，切换开销大 | 运行时很少改变 |
+| `v-show` | 始终渲染，初始渲染开销大 | 频繁切换 |
+
+## 列表渲染
+
+```html
+<!-- 基本用法 -->
+<li v-for="item in items" :key="item.id">
+  {{ item.name }}
+</li>
+
+<!-- 带索引 -->
+<li v-for="(item, index) in items" :key="item.id">
+  {{ index }} - {{ item.name }}
+</li>
+
+<!-- 遍历对象 -->
+<li v-for="(value, key, index) in obj" :key="key">
+  {{ key }}: {{ value }}
+</li>
+```
+
+⚠️ **必须绑定 `:key`**，帮助 Vue 高效更新列表
+
+## 组件基础
+
+### 注册组件
+
+```javascript
+// 全局注册
+app.component('MyButton', {
+  props: ['title', 'disabled'],
+  template: `
+    <button :disabled="disabled" @click="$emit('click')">
+      {{ title }}
+    </button>
+  `
+})
+
+// 局部注册
+export default {
+  components: { MyButton }
+}
+```
+
+### 父子通信
+
+```html
+<!-- 父组件 -->
+<template>
+  <ChildComponent 
+    :message="parentMsg" 
+    @child-event="handleEvent"
+  />
+</template>
+
+<script>
+// 子组件：接收 props，触发事件
+export default {
+  props: ['message'],
+  methods: {
+    sendData() {
+      this.$emit('child-event', { data: 'hello' })
+    }
+  }
+}
+</script>
+```
+
+## 今日要点
+
+- ✅ 掌握 v-if / v-else-if / v-else / v-show
+- ✅ 熟练使用 v-for 并绑定 :key
+- ✅ 理解组件注册方式
+- ✅ 掌握 props 和 $emit 通信
+\ No newline at end of file
\ No newline at end of file
diff --git "a/\345\206\257\345\271\277\346\201\272/20260224.md" "b/\345\206\257\345\271\277\346\201\272/20260224.md"
new file mode 100644
index 0000000..3fc1000
--- /dev/null
+++ "b/\345\206\257\345\271\277\346\201\272/20260224.md"
@@ -0,0 +1,100 @@
+# **文件 4：Vue.js_Day4_生命周期与组合式API.md**
+
+```markdown
+# Vue.js 入门 Day 4：生命周期与组合式 API
+
+## 生命周期钩子
+
+```javascript
+export default {
+  // 创建阶段
+  beforeCreate() { console.log('实例初始化前') },
+  created() { console.log('实例创建完成，可访问data/methods') },
+  
+  // 挂载阶段
+  beforeMount() { console.log('挂载前，DOM未生成') },
+  mounted() { console.log('挂载完成，DOM可用') },
+  
+  // 更新阶段
+  beforeUpdate() { console.log('数据更新前') },
+  updated() { console.log('数据更新后') },
+  
+  // 卸载阶段
+  beforeUnmount() { console.log('组件卸载前') },
+  unmounted() { console.log('组件已卸载') }
+}
+```
+
+## 生命周期图示
+
+```html
+beforeCreate → created → beforeMount → mounted
+                                            ↓
+beforeUnmount ← unmounted ← beforeUpdate ← updated
+```
+
+## 组合式 API（Vue 3 推荐）
+
+### 基础语法
+
+```vue
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+
+// 响应式数据
+const count = ref(0)           // 基本类型
+const state = reactive({       // 对象类型
+  name: 'Vue',
+  list: []
+})
+
+// 计算属性
+const double = computed(() => count.value * 2)
+
+// 方法
+const increment = () => {
+  count.value++
+}
+
+// 生命周期
+onMounted(() => {
+  console.log('组件已挂载')
+})
+
+// 侦听器
+import { watch } from 'vue'
+watch(count, (newVal, oldVal) => {
+  console.log(`count: ${oldVal} → ${newVal}`)
+})
+</script>
+
+<template>
+  <div>
+    <p>{{ count }} × 2 = {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+```
+
+## 选项式 vs 组合式
+
+| 方式 | 特点 | 适用场景 |
+|------|------|----------|
+
+| 选项式 | 结构清晰，易上手，`data`/`methods`/`computed` 分开 | 小型项目，初学者 |
+| 组合式 | 逻辑聚焦，复用性强，TypeScript 友好 | 中大型项目，复杂逻辑 |
+
+## 今日要点
+
+- ✅ 理解生命周期执行顺序
+- ✅ 掌握组合式 API（ref / reactive / computed）
+- ✅ 了解 `<script setup>` 语法糖
+- ✅ 能够区分选项式与组合式的使用场景
+
+## Vue 入门总结
+
+四天核心路径：
+
+```html
+模板指令 → 响应式数据 → 组件系统 → 生命周期 + 组合式 API
+```
\ No newline at end of file
-- 
Gitee