From c7886a4066043159b3914f622559b85a442ef865 Mon Sep 17 00:00:00 2001
From: qp1931000 <2209891622@qq.com>
Date: Mon, 27 Apr 2026 00:16:29 +0800
Subject: [PATCH] 1

---
 .../20260420\347\254\224\350\256\260.md"      | 44 ++++++++++++++++
 .../202604222\347\254\224\350\256\260.md"     | 49 +++++++++++++++++
 .../20260423\347\254\224\350\256\260.md"      | 34 ++++++++++++
 .../20260424\347\254\224\350\256\260.md"      | 52 +++++++++++++++++++
 4 files changed, 179 insertions(+)
 create mode 100644 "\351\231\210\346\272\220/20260420\347\254\224\350\256\260.md"
 create mode 100644 "\351\231\210\346\272\220/202604222\347\254\224\350\256\260.md"
 create mode 100644 "\351\231\210\346\272\220/20260423\347\254\224\350\256\260.md"
 create mode 100644 "\351\231\210\346\272\220/20260424\347\254\224\350\256\260.md"

diff --git "a/\351\231\210\346\272\220/20260420\347\254\224\350\256\260.md" "b/\351\231\210\346\272\220/20260420\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..71c622d
--- /dev/null
+++ "b/\351\231\210\346\272\220/20260420\347\254\224\350\256\260.md"
@@ -0,0 +1,44 @@
+# 笔记
+
+## 数据绑定
+    - 文本插值
+    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\272\220/202604222\347\254\224\350\256\260.md" "b/\351\231\210\346\272\220/202604222\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..a63700b
--- /dev/null
+++ "b/\351\231\210\346\272\220/202604222\347\254\224\350\256\260.md"
@@ -0,0 +1,49 @@
+# 笔记
+
+## 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()）的方法
diff --git "a/\351\231\210\346\272\220/20260423\347\254\224\350\256\260.md" "b/\351\231\210\346\272\220/20260423\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..b4b3f46
--- /dev/null
+++ "b/\351\231\210\346\272\220/20260423\347\254\224\350\256\260.md"
@@ -0,0 +1,34 @@
+# 笔记
+
+# 笔记
+
+计算属性和侦听器是 Vue.js 中处理数据变化的重要工具。
+
+## 计算属性 (computed)
+
+计算属性是基于响应式依赖进行缓存的，只有当依赖发生变化时才会重新计算。
+
+```javascript
+computed: {
+  fullName: function () {
+    return this.firstName + ' ' + this.lastName
+  }
+}
+```
+
+## 侦听器 (watch)
+
+侦听器用于监听数据变化并执行异步操作或开销较大的操作。
+
+```javascript
+watch: {
+  question: function (newQuestion, oldQuestion) {
+    // 执行异步操作
+  }
+}
+```
+
+## 区别
+
+- 计算属性适合用于复杂逻辑的计算。
+- 侦听器适合用于监听特定数据变化并执行副作用。
\ No newline at end of file
diff --git "a/\351\231\210\346\272\220/20260424\347\254\224\350\256\260.md" "b/\351\231\210\346\272\220/20260424\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..9fd48b6
--- /dev/null
+++ "b/\351\231\210\346\272\220/20260424\347\254\224\350\256\260.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" />
+```
\ No newline at end of file
-- 
Gitee