From e66bc385c8c1f64cc0890ac44593d5533c4dddfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=AE=B6=E5=92=8C?= <1409177310@qq.com>
Date: Mon, 27 Apr 2026 00:09:05 +0800
Subject: [PATCH] ds

---
 .../20240420.md"                              | 27 ++++++
 .../20260422.md"                              | 32 +++++++
 .../20260423.md"                              | 85 +++++++++++++++++++
 .../20260424.md"                              | 37 ++++++++
 4 files changed, 181 insertions(+)
 create mode 100644 "\346\235\216\345\256\266\345\222\214/20240420.md"
 create mode 100644 "\346\235\216\345\256\266\345\222\214/20260422.md"
 create mode 100644 "\346\235\216\345\256\266\345\222\214/20260423.md"
 create mode 100644 "\346\235\216\345\256\266\345\222\214/20260424.md"

diff --git "a/\346\235\216\345\256\266\345\222\214/20240420.md" "b/\346\235\216\345\256\266\345\222\214/20240420.md"
new file mode 100644
index 0000000..0eace65
--- /dev/null
+++ "b/\346\235\216\345\256\266\345\222\214/20240420.md"
@@ -0,0 +1,27 @@
+# 笔记
+## 基础认识Vue
+1. Vue.js是基于HTML、CSS和JS构建的，是一个更轻量级的前端框架，文件体积小，加载速度快。
+2. Vue.js采用MVVM模式进行前端开发，是MVC模式本质上的改进版，目的是分离视图和模型，主要有低耦合、可重用、可独立开发、可测试。
+3. Model、View、ViewModel（当用户操作View时，ViewModel会感知到变化，并通知Model进行相应改变；反之，当Model发生改变，ViewModel也会感知到变化，并通知View进行更新。）
+## 项目的创建方式
+```
+yarn create vite   # 创建项目
+cd 项目名          # 进入文件夹
+yarn              # 安装依赖
+yarn dev          # 启动项目
+```
+## 项目的目录结构
+```
+my-vue3/
+├── node_modules/       # 项目依赖包（不用管）
+├── public/             # 静态资源（图标等）
+├── src/                # 【核心：我们写代码的文件夹】
+│   ├── assets/         # 图片、样式等资源
+│   ├── components/     # 公共组件
+│   ├── App.vue         # 【根组件：所有页面入口】
+│   └── main.js         # 【项目主入口：挂载Vue】
+├── .gitignore          # git忽略文件
+├── index.html          # 页面模板
+├── package.json        # 项目配置、依赖
+└── vite.config.js      # vite配置文件
+```
\ No newline at end of file
diff --git "a/\346\235\216\345\256\266\345\222\214/20260422.md" "b/\346\235\216\345\256\266\345\222\214/20260422.md"
new file mode 100644
index 0000000..9531a72
--- /dev/null
+++ "b/\346\235\216\345\256\266\345\222\214/20260422.md"
@@ -0,0 +1,32 @@
+## 选择题
+1.在vue.js中，组件所需的数据和方法卸载（A.setup）函数中。
+2.用户为HTML元素的属性绑定数据的指令是（B.v-bind）。
+3.在进行数据绑定时，不能被解析的JavaScript表达式是 [B.{{Var a=1}}]。
+4.使用reactive()函数定义响应式数据，数据类型不可以是（字符串）
+## 判断题
+1.Vue.js实例是通过setup()函数创建的。（×）
+2.Vue.js最基本的数据绑定方式是文本插值。（√）
+3.使用双大括会将含有HTML元素的数据解释为HTML元素。（×）
+4.Vue.js中，ref()函数可以定义任何类型的响应式数据。（√）
+5.计算属性通过computed()函数定义，侦听器通过watch()函数定义。（√）
+## 操作题
+```
+<script setup>
+import { ref, computed } from 'vue';
+
+const priceA = ref(0)
+const priceB = ref(0)
+
+const total = computed(() => {
+  return Number(priceA.value) + Number(priceB.value)
+})
+</script>
+
+<template>
+  <form>
+    商品A的价格：<input type="text" v-model="priceA" />元<br>
+    商品A的价格：<input type="text" v-model="priceB" />元<br>
+    商品的总价格：<input type="text" v-model="total" />
+  </form>
+</template>
+```
\ No newline at end of file
diff --git "a/\346\235\216\345\256\266\345\222\214/20260423.md" "b/\346\235\216\345\256\266\345\222\214/20260423.md"
new file mode 100644
index 0000000..8eb421b
--- /dev/null
+++ "b/\346\235\216\345\256\266\345\222\214/20260423.md"
@@ -0,0 +1,85 @@
+## 笔记
+Vue 计算属性 & 侦听器
+
+一、计算属性 computed
+
+1. 核心要点
+
+• 自带缓存，依赖不变就不重复计算，性能更好
+
+• 只能只读（不用 get/set 写法）
+
+• 适合：数据拼接、筛选、计算、格式化
+
+• 写法简洁，同步简单逻辑
+
+2. 基础写法（setup 语法糖 最简版）
+```
+<script setup>
+import { ref, computed } from 'vue'
+
+const num = ref(10)
+
+// 只读计算属性，无 get/set
+const doubleNum = computed(() => {
+  // 直接 return 计算结果
+  return num.value * 2
+})
+</script>
+
+<template>
+  <div>{{ doubleNum }}</div>
+</template>
+```
+3. 简单案例：字符串拼接
+const firstName = ref('张')
+const lastName = ref('三')
+
+const fullName = computed(() => {
+  return firstName.value + lastName.value
+})
+4. 计算属性 vs 普通函数
+
+• 函数：每次页面刷新都会执行，无缓存
+
+• 计算属性：依赖值不变，只执行一次，优先用 computed
+二、侦听器 watch
+
+1. 核心要点
+
+• 监听数据变化，数据变就触发
+
+• 无缓存，适合：异步请求、复杂业务、多步操作
+
+• 可以拿到新值、旧值
+
+2. 监听基础数据（ref）
+```
+import { ref, watch } from 'vue'
+
+const count = ref(0)
+
+// 监听单个简单数据
+watch(count, (newVal, oldVal) => {
+  console.log('新值', newVal)
+  console.log('旧值', oldVal)
+})
+```
+3. 监听对象 / 深层数据
+```
+import { reactive, watch } from 'vue'
+
+const user = reactive({
+  name: '小明',
+  age: 18
+})
+// 监听对象单个属性（推荐，不用深度监听）
+watch(() => user.age, (newVal) => {
+  console.log('年龄变了', newVal)
+})
+
+// 监听整个对象，需要 deep 深度监听
+watch(user, () => {
+  console.log('用户信息修改)
+})
+```
\ No newline at end of file
diff --git "a/\346\235\216\345\256\266\345\222\214/20260424.md" "b/\346\235\216\345\256\266\345\222\214/20260424.md"
new file mode 100644
index 0000000..0e0518a
--- /dev/null
+++ "b/\346\235\216\345\256\266\345\222\214/20260424.md"
@@ -0,0 +1,37 @@
+## 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()）的方法
\ No newline at end of file
-- 
Gitee