From 082a3f267b94c54c3e828bb95552d9c55f3b1d73 Mon Sep 17 00:00:00 2001
From: Lin Joy <11099947+Lin-Joy@user.noreply.gitee.com>
Date: Sun, 26 Apr 2026 23:35:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=EF=BC=9A=E7=AC=AC=2010=20?=
 =?UTF-8?q?=E5=91=A8=E8=AF=BE=E5=A0=82=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../0420 - \345\210\235\350\257\206 Vue.md"   | 214 +++++++++++++
 ...60\346\215\256\347\273\221\345\256\232.md" | 225 ++++++++++++++
 ...16\344\276\246\345\220\254\345\231\250.md" | 187 ++++++++++++
 ...0424 - Vue.js \346\214\207\344\273\244.md" | 282 ++++++++++++++++++
 4 files changed, 908 insertions(+)
 create mode 100644 "\346\236\227\344\275\263\351\237\263/0420 - \345\210\235\350\257\206 Vue.md"
 create mode 100644 "\346\236\227\344\275\263\351\237\263/0422 - \346\225\260\346\215\256\347\273\221\345\256\232.md"
 create mode 100644 "\346\236\227\344\275\263\351\237\263/0423 - \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"
 create mode 100644 "\346\236\227\344\275\263\351\237\263/0424 - Vue.js \346\214\207\344\273\244.md"

diff --git "a/\346\236\227\344\275\263\351\237\263/0420 - \345\210\235\350\257\206 Vue.md" "b/\346\236\227\344\275\263\351\237\263/0420 - \345\210\235\350\257\206 Vue.md"
new file mode 100644
index 0000000..f5a7677
--- /dev/null
+++ "b/\346\236\227\344\275\263\351\237\263/0420 - \345\210\235\350\257\206 Vue.md"	
@@ -0,0 +1,214 @@
+# 2026.04.20 - 初识 Vue
+
+> Vue 是用于构建用户界面的 JavaScript 框架，常用于开发数据驱动的前端页面。
+
+## 1. Vue 基本概念
+
+| 内容 | 说明 |
+| --- | --- |
+| Vue | 前端 JavaScript 框架 |
+| 数据驱动 | 数据变化后，页面自动更新 |
+| 组件化 | 将页面拆分成多个独立模块 |
+| 单文件组件 | 以 `.vue` 结尾的组件文件 |
+
+Vue 页面开发中，更关注数据和页面之间的关系。
+
+```html
+<h1>{{ message }}</h1>
+```
+
+`{{ message }}` 会把 JavaScript 中的 `message` 数据显示到页面中。
+
+## 2. 环境准备
+
+| 工具 | 作用 | 检查命令 |
+| --- | --- | --- |
+| Node.js | 让 JavaScript 可以在本地环境运行 | `node -v` |
+| npm | 安装和管理项目依赖 | `npm -v` |
+
+安装 Node.js 后，npm 会一起安装。
+
+```bash
+node -v
+npm -v
+```
+
+终端能显示版本号，表示环境基本可用。
+
+## 3. 创建 Vue 项目
+
+使用 npm 创建 Vue 项目：
+
+```bash
+npm create vue@latest
+```
+
+创建过程中常见选项：
+
+| 选项 | 说明 |
+| --- | --- |
+| Project name | 项目名称 |
+| TypeScript | 是否使用 TypeScript |
+| JSX Support | 是否支持 JSX |
+| Vue Router | 是否添加路由 |
+| Pinia | 是否添加状态管理 |
+| ESLint | 是否添加代码检查 |
+| Prettier | 是否添加代码格式化 |
+
+入门项目可以先选择基础配置，后续需要时再添加路由、状态管理等内容。
+
+## 4. 运行 Vue 项目
+
+进入项目目录：
+
+```bash
+cd 项目名称
+```
+
+安装依赖：
+
+```bash
+npm install
+```
+
+启动开发服务器：
+
+```bash
+npm run dev
+```
+
+启动成功后，终端会显示本地访问地址，常见地址：
+
+```txt
+http://localhost:5173/
+```
+
+停止运行：
+
+```bash
+Ctrl + C
+```
+
+## 5. 项目目录结构
+
+Vue 项目常见结构：
+
+```txt
+项目名称
+├─ node_modules
+├─ public
+├─ src
+│  ├─ assets
+│  ├─ components
+│  ├─ App.vue
+│  └─ main.js
+├─ index.html
+├─ package.json
+└─ vite.config.js
+```
+
+| 文件或文件夹 | 作用 |
+| --- | --- |
+| `node_modules` | 项目依赖文件夹 |
+| `public` | 静态资源目录 |
+| `src` | 源代码目录 |
+| `src/assets` | 图片、样式等资源 |
+| `src/components` | 组件目录 |
+| `src/App.vue` | 根组件 |
+| `src/main.js` | 项目入口文件 |
+| `index.html` | HTML 入口页面 |
+| `package.json` | 项目信息、依赖、运行命令 |
+| `vite.config.js` | Vite 配置文件 |
+
+## 6. `package.json`
+
+`package.json` 中常见的 `scripts`：
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+| 命令 | 作用 |
+| --- | --- |
+| `npm run dev` | 启动开发环境 |
+| `npm run build` | 打包项目 |
+| `npm run preview` | 预览打包后的项目 |
+
+## 7. Vue 应用挂载
+
+`index.html` 中提供挂载位置：
+
+```html
+<div id="app"></div>
+```
+
+`src/main.js` 中创建并挂载 Vue 应用：
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+```
+
+| 代码 | 说明 |
+| --- | --- |
+| `createApp(App)` | 创建 Vue 应用 |
+| `App` | 根组件 |
+| `.mount('#app')` | 挂载到 `id="app"` 的元素上 |
+
+## 8. `.vue` 单文件组件
+
+`.vue` 文件通常由三部分组成：
+
+```html
+<template>
+  <h1>{{ message }}</h1>
+</template>
+
+<script setup>
+const message = 'Hello Vue'
+</script>
+
+<style scoped>
+h1 {
+  color: #42b883;
+}
+</style>
+```
+
+| 区域 | 作用 |
+| --- | --- |
+| `<template>` | 页面结构 |
+| `<script setup>` | 数据和逻辑 |
+| `<style scoped>` | 当前组件样式 |
+
+`scoped` 表示样式只作用于当前组件。
+
+## 9. 插值表达式
+
+语法：
+
+```html
+{{ 数据名 }}
+```
+
+示例：
+
+```html
+<template>
+  <p>{{ name }}</p>
+</template>
+
+<script setup>
+const name = 'Vue'
+</script>
+```
+
+插值表达式适合显示文本内容，不适合写在标签属性中。
diff --git "a/\346\236\227\344\275\263\351\237\263/0422 - \346\225\260\346\215\256\347\273\221\345\256\232.md" "b/\346\236\227\344\275\263\351\237\263/0422 - \346\225\260\346\215\256\347\273\221\345\256\232.md"
new file mode 100644
index 0000000..f43375d
--- /dev/null
+++ "b/\346\236\227\344\275\263\351\237\263/0422 - \346\225\260\346\215\256\347\273\221\345\256\232.md"	
@@ -0,0 +1,225 @@
+# 2026.04.22 - 数据绑定
+
+> 数据绑定用于建立数据和页面之间的联系。数据改变时，页面会根据绑定关系自动更新。
+
+## 1. 插值表达式
+
+插值表达式用于显示文本内容。
+
+```html
+<template>
+  <h2>{{ title }}</h2>
+  <p>{{ message }}</p>
+</template>
+
+<script setup>
+const title = '数据绑定'
+const message = 'Vue 会根据数据更新页面'
+</script>
+```
+
+| 语法 | 作用 |
+| --- | --- |
+| `{{ title }}` | 显示 `title` 的值 |
+| `{{ message }}` | 显示 `message` 的值 |
+
+插值表达式中写变量名，不需要加引号。
+
+## 2. 响应式数据 `ref`
+
+在 Vue 3 的组合式 API 中，可以使用 `ref` 创建响应式数据。
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+```
+
+| 使用位置 | 写法 |
+| --- | --- |
+| 模板中显示 | `{{ count }}` |
+| JavaScript 中读取 | `count.value` |
+| JavaScript 中修改 | `count.value = 1` |
+
+示例：
+
+```html
+<template>
+  <p>数量：{{ count }}</p>
+  <button @click="add">加 1</button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+function add() {
+  count.value++
+}
+</script>
+```
+
+## 3. 属性绑定 `v-bind`
+
+标签属性需要使用 `v-bind` 绑定数据。
+
+```html
+<template>
+  <img v-bind:src="imgUrl" v-bind:alt="imgText">
+</template>
+
+<script setup>
+const imgUrl = '/logo.png'
+const imgText = 'Vue Logo'
+</script>
+```
+
+`v-bind` 简写：
+
+```html
+<img :src="imgUrl" :alt="imgText">
+```
+
+常见属性绑定：
+
+| 写法 | 作用 |
+| --- | --- |
+| `:src="imgUrl"` | 绑定图片地址 |
+| `:href="url"` | 绑定链接地址 |
+| `:title="text"` | 绑定提示文本 |
+| `:disabled="isDisabled"` | 控制按钮禁用状态 |
+
+## 4. 表单双向绑定 `v-model`
+
+`v-model` 常用于表单元素。
+
+```html
+<template>
+  <input v-model="username" placeholder="请输入姓名">
+  <p>姓名：{{ username }}</p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const username = ref('')
+</script>
+```
+
+| 方向 | 说明 |
+| --- | --- |
+| 页面输入改变 | 数据同步改变 |
+| 数据改变 | 页面输入框同步改变 |
+
+常见可用元素：
+
+- `input`
+- `textarea`
+- `select`
+
+## 5. `v-bind` 和 `v-model` 对比
+
+| 指令 | 绑定方向 | 常用场景 |
+| --- | --- | --- |
+| `v-bind` | 数据到页面 | 绑定属性 |
+| `v-model` | 数据和页面双向同步 | 表单输入 |
+
+示例：
+
+```html
+<template>
+  <input v-model="keyword">
+  <a :href="url">搜索</a>
+</template>
+```
+
+## 6. class 绑定
+
+对象写法：
+
+```html
+<template>
+  <p :class="{ active: isActive }">状态文本</p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isActive = ref(true)
+</script>
+
+<style scoped>
+.active {
+  color: red;
+  font-weight: bold;
+}
+</style>
+```
+
+| 数据值 | 页面结果 |
+| --- | --- |
+| `isActive` 为 `true` | 添加 `active` 类名 |
+| `isActive` 为 `false` | 不添加 `active` 类名 |
+
+数组写法：
+
+```html
+<p :class="[className, isActive ? 'active' : '']">文本</p>
+```
+
+## 7. style 绑定
+
+对象写法：
+
+```html
+<template>
+  <p :style="{ color: textColor, fontSize: fontSize + 'px' }">
+    样式绑定
+  </p>
+</template>
+
+<script setup>
+const textColor = 'blue'
+const fontSize = 20
+</script>
+```
+
+CSS 属性名可以使用小驼峰写法：
+
+| CSS 写法 | Vue 对象写法 |
+| --- | --- |
+| `font-size` | `fontSize` |
+| `background-color` | `backgroundColor` |
+
+## 8. 综合示例
+
+```html
+<template>
+  <div>
+    <input v-model="name" placeholder="请输入姓名">
+
+    <p :class="{ active: isActive }">
+      姓名：{{ name }}
+    </p>
+
+    <button @click="isActive = !isActive">切换样式</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const name = ref('')
+const isActive = ref(false)
+</script>
+
+<style scoped>
+.active {
+  color: #42b883;
+  font-weight: bold;
+}
+</style>
+```
diff --git "a/\346\236\227\344\275\263\351\237\263/0423 - \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/\346\236\227\344\275\263\351\237\263/0423 - \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 0000000..5c4f0c3
--- /dev/null
+++ "b/\346\236\227\344\275\263\351\237\263/0423 - \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,187 @@
+# 2026.04.23 - 计算属性与侦听器
+
+> `computed` 用于计算结果，`watch` 用于监听数据变化后执行操作。
+
+## 1. 计算属性 `computed`
+
+`computed` 根据已有数据计算出新的结果。
+
+```html
+<template>
+  <p>单价：{{ price }}</p>
+  <p>数量：{{ count }}</p>
+  <p>总价：{{ total }}</p>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const price = ref(10)
+const count = ref(3)
+
+const total = computed(() => {
+  return price.value * count.value
+})
+</script>
+```
+
+| 数据 | 说明 |
+| --- | --- |
+| `price` | 单价 |
+| `count` | 数量 |
+| `total` | 根据单价和数量计算出的总价 |
+
+## 2. `computed` 特点
+
+| 特点 | 说明 |
+| --- | --- |
+| 自动更新 | 依赖的数据变化后，计算结果会更新 |
+| 有缓存 | 依赖的数据不变时，不会重复计算 |
+| 像数据一样使用 | 模板中使用时不加小括号 |
+
+模板中使用：
+
+```html
+<p>{{ total }}</p>
+```
+
+## 3. `computed` 和普通函数
+
+普通函数写法：
+
+```html
+<template>
+  <p>{{ getTotal() }}</p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const price = ref(10)
+const count = ref(3)
+
+function getTotal() {
+  return price.value * count.value
+}
+</script>
+```
+
+对比：
+
+| 对比项 | `computed` | 普通函数 |
+| --- | --- | --- |
+| 模板写法 | `{{ total }}` | `{{ getTotal() }}` |
+| 是否缓存 | 有缓存 | 每次调用都会执行 |
+| 适合场景 | 展示计算结果 | 事件处理、普通逻辑 |
+
+## 4. 完整姓名示例
+
+```html
+<template>
+  <input v-model="firstName" placeholder="姓">
+  <input v-model="lastName" placeholder="名">
+
+  <p>完整姓名：{{ fullName }}</p>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const firstName = ref('张')
+const lastName = ref('三')
+
+const fullName = computed(() => {
+  return firstName.value + lastName.value
+})
+</script>
+```
+
+`fullName` 依赖 `firstName` 和 `lastName`。
+
+## 5. 侦听器 `watch`
+
+`watch` 用于监听数据变化。
+
+基本语法：
+
+```js
+watch(监听的数据, (新值, 旧值) => {
+  // 数据变化后执行
+})
+```
+
+示例：
+
+```html
+<template>
+  <input v-model="keyword" placeholder="请输入搜索内容">
+  <p>搜索内容：{{ keyword }}</p>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const keyword = ref('')
+
+watch(keyword, (newValue, oldValue) => {
+  console.log('旧值：', oldValue)
+  console.log('新值：', newValue)
+})
+</script>
+```
+
+| 参数 | 说明 |
+| --- | --- |
+| `newValue` | 变化后的新值 |
+| `oldValue` | 变化前的旧值 |
+
+## 6. `computed` 和 `watch` 对比
+
+| 对比项 | `computed` | `watch` |
+| --- | --- | --- |
+| 主要作用 | 根据数据计算结果 | 监听数据变化 |
+| 是否需要返回值 | 通常需要返回结果 | 不一定需要返回结果 |
+| 使用场景 | 总价、全名、筛选结果 | 打印日志、发送请求、数据保存 |
+| 模板中使用 | 可以直接显示 | 通常不直接显示 |
+
+## 7. 商品数量示例
+
+```html
+<template>
+  <p>单价：{{ price }}</p>
+
+  <input v-model="count" type="number">
+
+  <p>总价：{{ total }}</p>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const price = ref(12)
+const count = ref(1)
+
+const total = computed(() => {
+  return price.value * count.value
+})
+
+watch(count, (newValue, oldValue) => {
+  console.log(`数量从 ${oldValue} 变成 ${newValue}`)
+})
+</script>
+```
+
+| 功能 | 使用 |
+| --- | --- |
+| 计算总价 | `computed` |
+| 监听数量变化 | `watch` |
+
+## 8. 注意点
+
+| 内容 | 注意 |
+| --- | --- |
+| `computed` | 模板中使用时不加 `()` |
+| `watch` | 监听的数据名需要正确 |
+| `ref` | JavaScript 中读取和修改需要 `.value` |
+| 计算结果 | 优先使用 `computed` |
+| 数据变化后的操作 | 使用 `watch` |
diff --git "a/\346\236\227\344\275\263\351\237\263/0424 - Vue.js \346\214\207\344\273\244.md" "b/\346\236\227\344\275\263\351\237\263/0424 - Vue.js \346\214\207\344\273\244.md"
new file mode 100644
index 0000000..bcf3d7b
--- /dev/null
+++ "b/\346\236\227\344\275\263\351\237\263/0424 - Vue.js \346\214\207\344\273\244.md"	
@@ -0,0 +1,282 @@
+# 2026.04.24 - Vue.js 指令
+
+> Vue 指令是写在标签上的特殊属性，用于控制内容显示、属性绑定、事件绑定、条件渲染和列表渲染。
+
+## 1. 常用指令
+
+| 指令 | 作用 | 简写 |
+| --- | --- | --- |
+| `v-text` | 设置文本内容 | 无 |
+| `v-html` | 设置 HTML 内容 | 无 |
+| `v-bind` | 绑定标签属性 | `:` |
+| `v-model` | 表单双向绑定 | 无 |
+| `v-on` | 绑定事件 | `@` |
+| `v-if` | 条件渲染 | 无 |
+| `v-show` | 显示或隐藏元素 | 无 |
+| `v-for` | 循环渲染列表 | 无 |
+
+## 2. `v-text`
+
+用于设置元素文本内容。
+
+```html
+<template>
+  <p v-text="message"></p>
+</template>
+
+<script setup>
+const message = 'Vue 指令'
+</script>
+```
+
+等价写法：
+
+```html
+<p>{{ message }}</p>
+```
+
+## 3. `v-html`
+
+用于将字符串作为 HTML 解析。
+
+```html
+<template>
+  <div v-html="content"></div>
+</template>
+
+<script setup>
+const content = '<strong>加粗文字</strong>'
+</script>
+```
+
+> `v-html` 会解析 HTML 内容，不适合直接渲染用户输入的数据。
+
+## 4. `v-bind`
+
+用于绑定标签属性。
+
+完整写法：
+
+```html
+<a v-bind:href="url">链接</a>
+```
+
+简写：
+
+```html
+<a :href="url">链接</a>
+```
+
+常见写法：
+
+```html
+<img :src="imgUrl" :alt="imgText">
+<button :disabled="isDisabled">提交</button>
+```
+
+## 5. `v-model`
+
+用于表单双向绑定。
+
+```html
+<template>
+  <input v-model="username" placeholder="请输入姓名">
+  <p>姓名：{{ username }}</p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const username = ref('')
+</script>
+```
+
+常用表单元素：
+
+| 元素 | 说明 |
+| --- | --- |
+| `input` | 单行输入 |
+| `textarea` | 多行输入 |
+| `select` | 下拉选择 |
+
+## 6. `v-on`
+
+用于绑定事件。
+
+完整写法：
+
+```html
+<button v-on:click="add">加 1</button>
+```
+
+简写：
+
+```html
+<button @click="add">加 1</button>
+```
+
+示例：
+
+```html
+<template>
+  <p>{{ count }}</p>
+  <button @click="add">加 1</button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+function add() {
+  count.value++
+}
+</script>
+```
+
+常见事件：
+
+| 写法 | 说明 |
+| --- | --- |
+| `@click` | 点击事件 |
+| `@input` | 输入事件 |
+| `@change` | 内容改变事件 |
+| `@submit` | 表单提交事件 |
+
+## 7. `v-if` / `v-else-if` / `v-else`
+
+用于条件渲染。
+
+```html
+<template>
+  <p v-if="score >= 90">优秀</p>
+  <p v-else-if="score >= 60">及格</p>
+  <p v-else>不及格</p>
+</template>
+
+<script setup>
+const score = 85
+</script>
+```
+
+| 指令 | 说明 |
+| --- | --- |
+| `v-if` | 条件成立时渲染 |
+| `v-else-if` | 前面条件不成立时继续判断 |
+| `v-else` | 前面条件都不成立时渲染 |
+
+## 8. `v-show`
+
+用于控制元素显示或隐藏。
+
+```html
+<template>
+  <p v-show="isShow">显示内容</p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isShow = ref(true)
+</script>
+```
+
+`v-if` 和 `v-show` 对比：
+
+| 对比项 | `v-if` | `v-show` |
+| --- | --- | --- |
+| 元素是否存在 | 条件不成立时不渲染 | 元素始终存在 |
+| 控制方式 | 创建或移除元素 | CSS 的 `display` |
+| 适合场景 | 不频繁切换 | 频繁切换 |
+
+## 9. `v-for`
+
+用于循环渲染数组。
+
+```html
+<template>
+  <ul>
+    <li v-for="item in fruits" :key="item">
+      {{ item }}
+    </li>
+  </ul>
+</template>
+
+<script setup>
+const fruits = ['苹果', '香蕉', '橙子']
+</script>
+```
+
+获取下标：
+
+```html
+<li v-for="(item, index) in fruits" :key="item">
+  {{ index + 1 }}. {{ item }}
+</li>
+```
+
+| 写法 | 说明 |
+| --- | --- |
+| `item in fruits` | 遍历数组 |
+| `(item, index) in fruits` | 同时获取元素和下标 |
+| `:key="item"` | 给每一项设置唯一标识 |
+
+## 10. 事件修饰符
+
+事件修饰符写在事件名后面。
+
+```html
+<form @submit.prevent="submitForm">
+  <button type="submit">提交</button>
+</form>
+```
+
+常见修饰符：
+
+| 修饰符 | 作用 |
+| --- | --- |
+| `.prevent` | 阻止默认行为 |
+| `.stop` | 阻止事件冒泡 |
+| `.once` | 事件只触发一次 |
+
+## 11. 综合示例
+
+```html
+<template>
+  <div>
+    <input v-model="newTodo" placeholder="请输入任务">
+    <button @click="addTodo">添加</button>
+
+    <p v-if="todos.length === 0">暂无任务</p>
+
+    <ul v-else>
+      <li v-for="(todo, index) in todos" :key="index">
+        {{ index + 1 }}. {{ todo }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const newTodo = ref('')
+const todos = ref([])
+
+function addTodo() {
+  if (newTodo.value.trim() === '') {
+    return
+  }
+
+  todos.value.push(newTodo.value)
+  newTodo.value = ''
+}
+</script>
+```
+
+| 功能 | 使用的指令 |
+| --- | --- |
+| 输入任务 | `v-model` |
+| 点击添加 | `@click` |
+| 判断空列表 | `v-if` |
+| 渲染任务列表 | `v-for` |
-- 
Gitee