From 2bd2977fb6c20e9640d5cd4216f43084ab1cf325 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E7=81=BF=E4=BC=9F?= <1445484116@qq.com> Date: Sun, 26 Apr 2026 22:39:21 +0800 Subject: [PATCH] feat:zy --- ....04.20-\345\210\235\350\257\206Vue.md.txt" | 156 ++++++++++++++++++ ...46\215\256\347\273\221\345\256\232.md.txt" | 109 ++++++++++++ ...47\233\221\345\220\254\345\231\250.md.txt" | 126 ++++++++++++++ ....24-Vue.js\346\214\207\344\273\244.md.txt" | 135 +++++++++++++++ 4 files changed, 526 insertions(+) create mode 100644 "\351\273\204\347\201\277\344\274\237/2026.04.20-\345\210\235\350\257\206Vue.md.txt" create mode 100644 "\351\273\204\347\201\277\344\274\237/2026.04.22-\346\225\260\346\215\256\347\273\221\345\256\232.md.txt" create mode 100644 "\351\273\204\347\201\277\344\274\237/2026.04.23-\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\233\221\345\220\254\345\231\250.md.txt" create mode 100644 "\351\273\204\347\201\277\344\274\237/2026.04.24-Vue.js\346\214\207\344\273\244.md.txt" diff --git "a/\351\273\204\347\201\277\344\274\237/2026.04.20-\345\210\235\350\257\206Vue.md.txt" "b/\351\273\204\347\201\277\344\274\237/2026.04.20-\345\210\235\350\257\206Vue.md.txt" new file mode 100644 index 0000000..49039c3 --- /dev/null +++ "b/\351\273\204\347\201\277\344\274\237/2026.04.20-\345\210\235\350\257\206Vue.md.txt" @@ -0,0 +1,156 @@ + +## 一、什么是 Vue +1. **Vue 是一款** 轻量、易学、高效的 **前端 JavaScript 框架** +2. 核心特点：**数据驱动视图**（数据变 → 页面自动变） +3. 目前主流版本：**Vue3**（Vue3 比 Vue2 更快、更小、更强） +4. 用途：开发网页、后台管理系统、移动端 H5、小程序、App 等 + +--- + +## 二、Vue3 核心优势 +- 更快：重写了虚拟 DOM，性能大幅提升 +- 更小：按需引入，打包体积更小 +- 更友好：支持 **组合式 API（Composition API）**，代码更好维护 +- 兼容 TypeScript +- 支持更丰富的工程化开发 + +--- + +## 三、第一个 Vue3 程序（最简单入门） +### 方式1：CDN 引入（不用安装，直接写） +```html + + + + + 我的第一个 Vue3 页面 + + + + +
+

{{ message }}

+
+ + + + +``` + +### 方式2：Vue CLI / Vite 工程化（正式开发用） +```bash +# 安装 vite +npm create vite@latest + +# 按提示选择：vue → javascript +cd 项目名 +npm install +npm run dev +``` + +--- + +## 四、Vue3 最核心语法（必背） +### 1. 插值表达式 {{ }} +- 作用：把数据显示到页面 +- 写法： +```html +{{ 变量名 }} +{{ 1 + 1 }} +{{ msg.toUpperCase() }} +``` + +### 2. data 数据 +- 存储页面用到的数据 +```js +data() { + return { + title: "Vue3 学习", + count: 0 + } +} +``` + +### 3. methods 方法 +- 写函数、处理逻辑 +```js +methods: { + add() { + this.count++ + } +} +``` + +### 4. 指令（最常用） +| 指令 | 作用 | +|------|------| +| `v-bind:` | 绑定属性（简写 `:`） | +| `v-on:` | 绑定事件（简写 `@`） | +| `v-model` | 双向绑定 | +| `v-if` | 条件显示 | +| `v-for` | 循环列表 | + +#### 示例：点击按钮数字 +1 +```html +
+

计数：{{ count }}

+ +
+ + +``` + +--- + +## 五、Vue3 核心思想（一定要懂） +1. **数据驱动视图** + 不用操作 DOM，只改数据，页面自动更新 +2. **声明式编程** + 告诉 Vue“要做什么”，不用管“怎么做” +3. **组件化** + 页面拆成一个个小组件，复用、维护更方便 + +--- + +## 六、Vue3 开发必备小知识 +- **Vue 实例**：`Vue.createApp()` 创建 +- **挂载点**：`mount('#app')` 控制页面区域 +- **this**：在 data 和 methods 里代表当前 Vue 实例 +- **响应式**：数据改变 → 视图自动刷新 + +--- + +## 七、入门总结（一句话） +**Vue3 = 数据 + 模板 + 方法 + 指令** +只要把数据写好，Vue 自动帮你渲染页面。 + +--- + +### 总结 +- **Vue3** 是主流前端框架，核心是**数据驱动视图** +- 入门最简单方式：**CDN + 插值 + 事件** +- 必学基础：`{{}}`、`data`、`methods`、`v-bind`、`v-on`、`v-model` diff --git "a/\351\273\204\347\201\277\344\274\237/2026.04.22-\346\225\260\346\215\256\347\273\221\345\256\232.md.txt" "b/\351\273\204\347\201\277\344\274\237/2026.04.22-\346\225\260\346\215\256\347\273\221\345\256\232.md.txt" new file mode 100644 index 0000000..8a0d66f --- /dev/null +++ "b/\351\273\204\347\201\277\344\274\237/2026.04.22-\346\225\260\346\215\256\347\273\221\345\256\232.md.txt" @@ -0,0 +1,109 @@ +# Vue3 数据绑定 核心笔记 +## 一、概念 +**数据绑定**：将 数据 和 页面 进行关联，修改数据，页面自动更新，无需手动操作DOM。 +Vue 核心：**单向绑定、双向绑定** + +--- + +## 二、单向数据绑定 +### 1. 插值绑定（文本绑定） +语法：`{{ 数据名/表达式 }}` +作用：在标签**内容中**展示数据 +```vue + + + +``` +特点： +- 只能写在标签**中间** +- 不能解析HTML标签 + +### 2. 属性绑定 v-bind +语法： +- 完整写法：`v-bind:属性名="数据"` +- 简写：`:属性名="数据"` +作用：给**标签属性**动态绑定数据 +```vue + +
+ + + +
+``` +> 普通属性写死，加 `:` 就是动态绑定数据 + +--- + +## 三、双向数据绑定 v-model +### 1. 核心概念 +**双向**： +1. 数据改变 → 页面表单自动更新 +2. 表单输入改变 → 数据自动同步修改 + +语法：`v-model="数据名"` +**只用于表单元素**：input、textarea、select 等 + +### 2. 基础示例 +```vue + + + +``` + +### 3. 常用表单绑定 +```vue + + + + + +``` + +--- + +## 四、绑定HTML（危险） +指令：`v-html` +作用：解析并渲染 HTML 标签 +```vue +
+ + +``` +⚠️ 注意：存在XSS安全风险，项目中谨慎使用 + +--- + +## 五、绑定总结 +1. **插值 {{ }}**：绑定标签文本内容，单向 +2. **v-bind / :**：绑定标签属性，单向 +3. **v-model**：表单双向绑定，最常用 +4. **v-html**：渲染html片段，单向 + +### 快速区分 +- 普通文字显示 → `{{}}` +- 动态修改属性 → `:` +- 输入框同步数据 → `v-model` diff --git "a/\351\273\204\347\201\277\344\274\237/2026.04.23-\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\233\221\345\220\254\345\231\250.md.txt" "b/\351\273\204\347\201\277\344\274\237/2026.04.23-\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\233\221\345\220\254\345\231\250.md.txt" new file mode 100644 index 0000000..345308f --- /dev/null +++ "b/\351\273\204\347\201\277\344\274\237/2026.04.23-\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\233\221\345\220\254\345\231\250.md.txt" @@ -0,0 +1,126 @@ +# Vue3 计算属性 & 监听器 笔记 +## 一、计算属性 computed +### 1. 概念 +基于**已有响应式数据**，**缓存计算结果**的属性； +依赖变化才重新计算，依赖不变，多次调用只算一次，**性能高**。 + +### 2. 特点 +1. 有**缓存**，复用结果，减少重复计算 +2. 写法像属性，调用不加 `()` +3. 内部逻辑简洁，适合**复杂表达式、数据二次处理** +4. 默认只读，可配置读写 + +### 3. 基础语法（组合式API） +```vue + + + +``` + +### 4. 完整写法（可读+可写） +```js +const count = ref(1) +const fullCount = computed({ + get() { + // 获取时触发 + return count.value + 10 + }, + set(val) { + // 修改计算属性时触发 + count.value = val - 10 + } +}) +``` + +### 5. 使用场景 +- 字符串拼接、格式处理（时间、手机号格式化） +- 数组筛选、过滤、求和 +- 多个数据结合运算 + +--- + +## 二、监听器 watch +### 1. 概念 +监听**指定数据**变化，数据改变就执行回调函数； +适合**异步操作、复杂业务逻辑、数据变化后续行为**。 + +### 2. 特点 +1. 无缓存，数据变就执行 +2. 专注**监听变化过程** +3. 支持异步请求、定时器、复杂逻辑 +4. 可监听简单数据、对象、数组 + +### 3. 基础用法 +```vue + +``` + +### 4. 深度监听 & 立即执行 +- `immediate:true`：页面加载**立即执行一次** +- `deep:true`：开启**深度监听**，监听对象/数组内部属性变化 +```js +const user = ref({ name: '张三', age: 18 }) + +watch(user, (newVal) => { + console.log('用户信息变化') +}, { + immediate: true, + deep: true +}) +``` + +### 5. 监听多个数据 +```js +const n1 = ref(1) +const n2 = ref(2) + +watch([n1, n2], ([newN1, newN2]) => { + console.log('数据变化') +}) +``` + +### 6. 使用场景 +- 输入框防抖、搜索发请求 +- 数据变化后本地存储 +- 监听路由、复杂对象修改 +- 异步请求操作 + +--- + +## 三、computed 与 watch 区别（重点必背） +1. **作用不同** +- computed：**计算派生数据**，简化模板复杂表达式 +- watch：**监听数据变化**，处理异步/副作用逻辑 + +2. **缓存** +- computed：有缓存，依赖不变不重复计算 +- watch：无缓存，数据修改就执行 + +3. **写法** +- computed：属性写法，不带括号 +- watch：函数回调写法 + +4. **使用场景** +- 简单计算、格式化 → 用 **computed** +- 异步请求、复杂业务、深度监听 → 用 **watch** + diff --git "a/\351\273\204\347\201\277\344\274\237/2026.04.24-Vue.js\346\214\207\344\273\244.md.txt" "b/\351\273\204\347\201\277\344\274\237/2026.04.24-Vue.js\346\214\207\344\273\244.md.txt" new file mode 100644 index 0000000..be102f9 --- /dev/null +++ "b/\351\273\204\347\201\277\344\274\237/2026.04.24-Vue.js\346\214\207\344\273\244.md.txt" @@ -0,0 +1,135 @@ +# Vue3 常用指令 完整笔记 +## 一、指令概念 +Vue指令：以 **v-** 开头的特殊标签属性，用来**操作DOM、控制页面结构、绑定事件/数据**。 +统一格式：`v-指令名="表达式"` + +--- + +## 二、常用基础指令 +### 1. v-text 文本渲染 +作用：设置标签**纯文本内容**，等价于 `{{}}` +```html +
+``` +特点： +- 覆盖标签原有内容 +- 无法解析html + +### 2. v-html 解析HTML +作用：将字符串解析为 HTML 标签渲染 +```html +
+``` +⚠️ 风险：容易引发 XSS 攻击，谨慎使用 + +### 3. v-bind 属性绑定（单向） +作用：动态绑定**标签属性** +- 完整写法：`v-bind:属性名="数据"` +- 简写：`:` +```html + +
+``` + +--- + +## 三、事件指令 +### 4. v-on 绑定事件 +作用：绑定鼠标、键盘等事件 +- 完整写法：`v-on:事件名="方法"` +- 简写：`@` +```html + + +``` + +**常用事件修饰符** +- `.stop` 阻止事件冒泡 +- `.prevent` 阻止默认行为（a标签、表单提交） +```html +跳转 +``` + +--- + +## 四、双向绑定指令 +### 5. v-model 双向数据绑定 +作用：**表单元素专属** +数据 ↔ 输入框 双向同步 +```html + +``` +适用：input、textarea、select、复选框、单选框 + +--- + +## 五、条件渲染指令 +### 6. v-if / v-else-if / v-else +作用：**条件判断，控制元素创建/销毁** +```html +
及格
+
不及格
+``` + +### 7. v-show +作用：控制元素**显示/隐藏** +```html +
内容
+``` + +### v-if 与 v-show 区别（必考） +1. **v-if**：操作DOM，移除/创建元素，切换频率低使用 +2. **v-show**：操作CSS(display)，只是隐藏，切换频繁使用 + +--- + +## 六、列表循环指令 +### 8. v-for 循环渲染 +作用：遍历数组/对象，批量生成元素 +基础语法： +```html + +
  • {{item.name}}
    • + + +
  • +``` +✅ 必加 **key**：提升渲染效率，防止列表错乱 + +--- + +## 七、特殊常用指令 +### 9. v-once +作用：元素/组件**只渲染一次**，后续数据改变不再更新 +```html +
    {{ msg }}
    +``` + +### 10. v-pre +作用：跳过编译，直接原样显示内容 +```html +
    {{ 原样显示，不解析 }}
    +``` + +--- + +## 八、指令汇总背诵 +| 指令 | 作用 | 简写 | +|------|------|------| +| v-text | 设置纯文本 | 无 | +| v-html | 解析html | 无 | +| v-bind | 动态绑定属性 | : | +| v-on | 绑定事件 | @ | +| v-model | 表单双向绑定 | 无 | +| v-if | 条件渲染（销毁） | 无 | +| v-show | 条件显示（隐藏） | 无 | +| v-for | 列表循环 | 无 | + +--- + +## 九、核心总结 +1. 动态属性用 **:`(v-bind)`** +2. 绑定事件用 **@`(v-on)`** +3. 表单输入同步用 **v-model** +4. 判断显示：低频切换v-if，高频切换v-show +5. 循环列表必须写 **key** \ No newline at end of file -- Gitee