From dfe7d3f4c479d758ee84d557b063e9cc7d6e1cc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9D=A8=E6=96=87?= <2112133735@qq.com>
Date: Sun, 26 Apr 2026 21:38:21 +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

---
 .../20260420-\345\210\235\350\257\206vue.md"  | 46 ++++++++++++++++
 ...60\346\215\256\347\273\221\345\256\232.md" | 32 ++++++++++++
 ...16\347\233\221\345\220\254\345\231\250.md" | 52 +++++++++++++++++++
 .../20260424-vue\346\214\207\344\273\244.md"  | 47 +++++++++++++++++
 4 files changed, 177 insertions(+)
 create mode 100644 "\351\231\210\346\235\250\346\226\207/20260420-\345\210\235\350\257\206vue.md"
 create mode 100644 "\351\231\210\346\235\250\346\226\207/20260422-\346\225\260\346\215\256\347\273\221\345\256\232.md"
 create mode 100644 "\351\231\210\346\235\250\346\226\207/20260423-\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\347\233\221\345\220\254\345\231\250.md"
 create mode 100644 "\351\231\210\346\235\250\346\226\207/20260424-vue\346\214\207\344\273\244.md"

diff --git "a/\351\231\210\346\235\250\346\226\207/20260420-\345\210\235\350\257\206vue.md" "b/\351\231\210\346\235\250\346\226\207/20260420-\345\210\235\350\257\206vue.md"
new file mode 100644
index 0000000..70bd58a
--- /dev/null
+++ "b/\351\231\210\346\235\250\346\226\207/20260420-\345\210\235\350\257\206vue.md"
@@ -0,0 +1,46 @@
+## 笔记
+
+```
+一、数据绑定
+    - 文本插值
+    const message = '我是文本插值的内容'
+    <p>{{message}}</P>
+    - HTML绑定
+    const htmlContent = '<span style="color: red">我是红色的 HTML (v-html)</span>'
+    <p>2. HTML 绑定： <span v-html="htmlContent"></span></p>
+    - 属性绑定
+    const imgSrc = 'https://v2.cn.vuejs.org/images/logo.png'
+    <img :src="imgSrc" alt="Logo" style="width: 50px;"> [v-bind 或简写 :，用来控制 src, href, class 等 ]
+
+    -ref() [给单个值穿外套]
+    import { ref } from 'vue'
+
+    // 1. 创建一个响应式数字
+    const count = ref(0) // 给数字 0 穿上了“智能外套”
+
+    // 2. 在 JavaScript 中，必须通过 .value 来访问和修改
+    console.log(count.value) // 访问: 输出 0
+    count.value++          // 修改: count.value 变成 1
+
+    // 3. 在模板 <template> 中，Vue 会自动帮你解包，不用写 .value
+    // <p>{{ count }}</p>  // 页面直接显示 1
+
+    -reactive() [给整个对象穿外套]
+    import { reactive } from 'vue'
+
+    // 1. 创建一个响应式对象
+    const user = reactive({
+    name: '张三',
+    age: 25
+    }) // 给整个 user 对象穿上了“智能外套”
+
+    // 2. 在 JavaScript 中，直接访问和修改属性，无需 .value
+    console.log(user.name) // 访问: 输出 '张三'
+    user.age = 26          // 修改: age 变成 26
+
+    // 3. 在模板 <template> 中，也直接使用
+    // <p>{{ user.name }} {{ user.age }}</p> // 页面显示 '张三 26'
+
+```
+
+## 项目
diff --git "a/\351\231\210\346\235\250\346\226\207/20260422-\346\225\260\346\215\256\347\273\221\345\256\232.md" "b/\351\231\210\346\235\250\346\226\207/20260422-\346\225\260\346\215\256\347\273\221\345\256\232.md"
new file mode 100644
index 0000000..26a6bbe
--- /dev/null
+++ "b/\351\231\210\346\235\250\346\226\207/20260422-\346\225\260\346\215\256\347\273\221\345\256\232.md"
@@ -0,0 +1,32 @@
+## 笔记
+
+计算属性和侦听器是 Vue.js 中处理数据变化的重要工具。
+
+## 计算属性 (computed)
+
+计算属性是基于响应式依赖进行缓存的，只有当依赖发生变化时才会重新计算。
+
+```javascript
+computed: {
+  fullName: function () {
+    return this.firstName + ' ' + this.lastName
+  }
+}
+```
+
+## 侦听器 (watch)
+
+侦听器用于监听数据变化并执行异步操作或开销较大的操作。
+
+```javascript
+watch: {
+  question: function (newQuestion, oldQuestion) {
+    // 执行异步操作
+  }
+}
+```
+
+## 区别
+
+- 计算属性适合用于复杂逻辑的计算。
+- 侦听器适合用于监听特定数据变化并执行副作用。
diff --git "a/\351\231\210\346\235\250\346\226\207/20260423-\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\347\233\221\345\220\254\345\231\250.md" "b/\351\231\210\346\235\250\346\226\207/20260423-\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\347\233\221\345\220\254\345\231\250.md"
new file mode 100644
index 0000000..781f7c7
--- /dev/null
+++ "b/\351\231\210\346\235\250\346\226\207/20260423-\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\347\233\221\345\220\254\345\231\250.md"
@@ -0,0 +1,52 @@
+## 笔记
+
+指令是 Vue.js 模板语法的一部分，以 `v-` 开头，用于在 DOM 上应用特殊行为。
+
+## 常用指令
+
+### v-if / v-else
+
+条件渲染：
+
+```html
+<p v-if="seen">现在你看到我了</p>
+<p v-else>现在你看不到我了</p>
+```
+
+### v-for
+
+列表渲染：
+
+```html
+<ul>
+  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
+</ul>
+```
+
+### v-bind
+
+动态绑定属性：
+
+```html
+<a v-bind:href="url">链接</a>
+<!-- 简写 -->
+<a :href="url">链接</a>
+```
+
+### v-on
+
+监听事件：
+
+```html
+<button v-on:click="doSomething">点击我</button>
+<!-- 简写 -->
+<button @click="doSomething">点击我</button>
+```
+
+### v-model
+
+双向数据绑定（主要用于表单）：
+
+```html
+<input v-model="message" />
+```
diff --git "a/\351\231\210\346\235\250\346\226\207/20260424-vue\346\214\207\344\273\244.md" "b/\351\231\210\346\235\250\346\226\207/20260424-vue\346\214\207\344\273\244.md"
new file mode 100644
index 0000000..49150cc
--- /dev/null
+++ "b/\351\231\210\346\235\250\346\226\207/20260424-vue\346\214\207\344\273\244.md"
@@ -0,0 +1,47 @@
+## v-for
+
+v-for 必带 key
+
+- 唯一 id 优先用
+
+```
+<div v-for="item in list" :key="item.id"></div>
+```
+
+- 无 id 再用下标
+
+```
+<div v-for="(item, index) in list" :key="index"></div>
+```
+
+## v-bind
+
+只要元素的属性需要动态变化，就用 v-bind（加冒号）。
+
+```
+图片会切换 → :src
+文字颜色会变 → :style
+按钮高亮切换 → :class
+跳转地址会变 → :href
+```
+
+## v-if、v-else、v-else-if
+
+```
+v-if：第一个条件
+v-else-if：中间多个条件
+v-else：剩下所有情况
+```
+
+## v-model
+
+```
+你在输入框打字 → 数据自动变
+代码里改数据 → 输入框内容自动变
+两边互相同步，这就是 v-model
+```
+
+## 83页项目考核
+
+1.v-else-if指令依附的元素必须紧跟在（C.v-if）指令依附的元素后面
+2.(B.v-show)指令是通过为元素添加或移除的“display:none”样式来控制元素的显示与隐藏的3.使用v-for指令不可以根据（A.指针）循环渲染列表4.使用v-bind指令为class属性绑定数据时，不可以将class属性值绑定为（A.字符串）5.在vue.js中，使用（A.v-model）指令可以在表单元素input、textarea和select上建立双向数据绑定6.全局自定义指令是指在全局注册的指令，这种指令可以用在全局中，其注册是使用实例得到（B.directive()）的方法
-- 
Gitee