From 57ae040e2064f8d498bbde7870822226de825299 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=AD=A6=E6=B6=B5?= <463023604@qq.com> Date: Mon, 20 Apr 2026 11:09:36 +0800 Subject: [PATCH 1/4] 06 --- ...35\350\265\226\347\254\224\350\256\260.md" | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 "20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" diff --git "a/20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" "b/20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" new file mode 100644 index 0000000..9e9ec00 --- /dev/null +++ "b/20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" @@ -0,0 +1,68 @@ +# 20260420 + +## 笔记 +- 验证安装: +```js +yarn -v +``` + - 安装 Yarn(验证安装时没安装yarn,使用该命令进行安装) + ```js + npm install -g yarn + ``` +- 执行创建命令 +```js +yarn create vue@latest +``` +- 进入项目目录 +```js +cd your-project-name +``` +- 安装项目依赖(这个命令会读取package.json中的依赖列表,自动下载并安装到node_modules目录) +```js +yarn install +``` +- 启动开发服务器 +```js +yarn dev +``` +生产环境打包 +```js +yarn build +``` +- 预览生产打包结果 +```js +yarn preview +``` +- 核心生态依赖 + - 路由管理 + ```js + yarn add vue-router + ``` + - 状态管理(替代 Vuex) + ```js + yarn add pinia + ``` +- 主流 UI 组件库 + - Element Plus(PC 端) + ```js + yarn add element-plus + ``` + - Ant Design Vue(PC 端) + ```js + yarn add ant-design-vue + ``` + - Vant(移动端) + ```js + yarn add vant + ``` +- 命令合集 + ```js + yarn init 初始化一个新项目 + yarn install 安装所有依赖 + yarn add 包名 安装生产依赖 + yarn add -D 包名 安装开发依赖 + yarn remove 包名 卸载依赖 + yarn upgrade 包名 更新指定依赖 + yarn run 脚本名 执行 package.json 中的脚本 + yarn cache clean 清除 Yarn 缓存 + ``` \ No newline at end of file -- Gitee From 0db0665a1749d91945098f56eaca0a5a2894b68d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=AD=A6=E6=B6=B5?= <463023604@qq.com> Date: Mon, 20 Apr 2026 11:17:33 +0800 Subject: [PATCH 2/4] 06 --- ...44\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename "20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" => "\351\231\210\345\255\246\346\266\265/20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" (100%) diff --git "a/20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" "b/\351\231\210\345\255\246\346\266\265/20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" similarity index 100% rename from "20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" rename to "\351\231\210\345\255\246\346\266\265/20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" -- Gitee From fff8f8e77dcd19e553a80e90a63805f6b3affbd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=AD=A6=E6=B6=B5?= <463023604@qq.com> Date: Thu, 23 Apr 2026 16:18:02 +0800 Subject: [PATCH 3/4] 06 --- ...35\350\265\226\347\254\224\350\256\260.md" | 0 ...24\345\274\217\347\254\224\350\256\260.md" | 13 +++ ...36\346\200\247\347\254\224\350\256\260.md" | 83 +++++++++++++++++++ 3 files changed, 96 insertions(+) rename "\351\231\210\345\255\246\346\266\265/20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" => "\351\231\210\345\255\246\346\266\265/20260420 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" (100%) create mode 100644 "\351\231\210\345\255\246\346\266\265/20260422 \345\223\215\345\272\224\345\274\217\347\254\224\350\256\260.md" create mode 100644 "\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\347\254\224\350\256\260.md" diff --git "a/\351\231\210\345\255\246\346\266\265/20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" "b/\351\231\210\345\255\246\346\266\265/20260420 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" similarity index 100% rename from "\351\231\210\345\255\246\346\266\265/20260120 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" rename to "\351\231\210\345\255\246\346\266\265/20260420 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" diff --git "a/\351\231\210\345\255\246\346\266\265/20260422 \345\223\215\345\272\224\345\274\217\347\254\224\350\256\260.md" "b/\351\231\210\345\255\246\346\266\265/20260422 \345\223\215\345\272\224\345\274\217\347\254\224\350\256\260.md" new file mode 100644 index 0000000..aee96d1 --- /dev/null +++ "b/\351\231\210\345\255\246\346\266\265/20260422 \345\223\215\345\272\224\345\274\217\347\254\224\350\256\260.md" @@ -0,0 +1,13 @@ +# 20260423 +- Vue 2 响应式原理 + ```js + 基于 Object.defineProperty() + ``` +- 对象新增属性不更新 + ```js + this.$set(this.obj, 'newKey', value) + ``` +- 数组下标修改不更新 + ```js + this.$set(this.arr, index, value) + ``` \ No newline at end of file diff --git "a/\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\347\254\224\350\256\260.md" "b/\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\347\254\224\350\256\260.md" new file mode 100644 index 0000000..76a8d95 --- /dev/null +++ "b/\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\347\254\224\350\256\260.md" @@ -0,0 +1,83 @@ +# 20260423 +- 计算属性 (Computed) + - 语法:computed: { 计算属性名() { return 结果 } } + - 基础用法示例 + ```js + + + + ``` + - 可读写计算属性(get + set) + ```js + computed: { + fullName: { + // 获取值 + get() { + return this.firstName + ' ' + this.lastName + }, + // 设置值(赋值时触发) + set(newVal) { + const arr = newVal.split(' ') + this.firstName = arr[0] + this.lastName = arr[1] + } + } + } + ``` + - 方法封装校验(提交时统一校验) + ```js + methods: { + // 统一校验方法 + validateForm() { + if (!this.username) { + alert('请输入用户名') + return false + } + if (!this.password) { + alert('请输入密码') + return false + } + return true + }, + submit() { + // 提交前先纠错校验 + if (!this.validateForm()) return + // 校验通过,发起请求 + } + } + ``` + - 侦听器校验(watch) + ```js + watch: { + username(newVal) { + // 模拟接口校验 + if (newVal === 'admin') { + this.errMsg = '该用户名已被占用' + } else { + this.errMsg = '' + } + } + } + ``` \ No newline at end of file -- Gitee From eede8ab0abffdf012113a5b57d3d373b360ec598 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=AD=A6=E6=B6=B5?= <463023604@qq.com> Date: Fri, 24 Apr 2026 10:13:20 +0800 Subject: [PATCH 4/4] 06 --- ...47\344\276\246\345\220\254\345\231\250.md" | 0 ...75\344\273\244\347\254\224\350\256\260.md" | 38 +++++++++++++++++++ 2 files changed, 38 insertions(+) rename "\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\347\254\224\350\256\260.md" => "\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\344\276\246\345\220\254\345\231\250.md" (100%) create mode 100644 "\351\231\210\345\255\246\346\266\265/20260424 \345\221\275\344\273\244\347\254\224\350\256\260.md" diff --git "a/\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\347\254\224\350\256\260.md" "b/\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\344\276\246\345\220\254\345\231\250.md" similarity index 100% rename from "\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\347\254\224\350\256\260.md" rename to "\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\344\276\246\345\220\254\345\231\250.md" diff --git "a/\351\231\210\345\255\246\346\266\265/20260424 \345\221\275\344\273\244\347\254\224\350\256\260.md" "b/\351\231\210\345\255\246\346\266\265/20260424 \345\221\275\344\273\244\347\254\224\350\256\260.md" new file mode 100644 index 0000000..cc4e634 --- /dev/null +++ "b/\351\231\210\345\255\246\346\266\265/20260424 \345\221\275\344\273\244\347\254\224\350\256\260.md" @@ -0,0 +1,38 @@ +# 20260424 + +1. 指令(3 个) + - `v-if="条件"` 条件为 true:显示元素(创建 DOM) + - `条件为 false:`隐藏元素(销毁 DOM) + - `v-else-if="条件"` 多条件分支,跟在 v-if 后 + - `v-else` 兜底分支,前面都不满足时显示 +2. 用法 + - 单分支:v-if + ```js + + + + ``` + - 双分支:v-if + v-else + ```js +

欢迎回来!

+

请先登录

+ ``` + - 多分支:v-if + v-else-if + v-else + - 必须连续写,中间不能插其他元素 + ```js +

优秀

+

良好

+

及格

+

不及格

+ ``` \ No newline at end of file -- Gitee