From 2a65ba8c6a1e6ce0bae4222ef9f3f55419c630a2 Mon Sep 17 00:00:00 2001 From: rou Date: Thu, 26 Mar 2026 21:45:32 +0800 Subject: [PATCH] vue2 --- 07-vue2/05-computed-and-watch/starter.html | 72 ++++++++++----- 07-vue2/05-computed-and-watch/starter.js | 7 +- 07-vue2/06-class-style-and-event/starter.html | 91 +++++++++++++------ 07-vue2/06-class-style-and-event/starter.js | 6 ++ 07-vue2/07-lifecycle-and-async/starter.js | 18 ++++ .../starter.js | 10 +- 07-vue2/09-final-course-dashboard/starter.js | 24 ++++- 7 files changed, 169 insertions(+), 59 deletions(-) diff --git a/07-vue2/05-computed-and-watch/starter.html b/07-vue2/05-computed-and-watch/starter.html index 39fc4df..63ada39 100644 --- a/07-vue2/05-computed-and-watch/starter.html +++ b/07-vue2/05-computed-and-watch/starter.html @@ -1,28 +1,50 @@ - - - - computed 和 watch - - - -
-

课程搜索

- -

匹配数量：{{ matchedCount }}

- -
- - - - + + + + computed 和 watch + + + + +
+

课程搜索

+ +

匹配数量：{{ matchedCount }}

+ +
+ + + + + + \ No newline at end of file diff --git a/07-vue2/05-computed-and-watch/starter.js b/07-vue2/05-computed-and-watch/starter.js index cfcef9a..85ef6b5 100644 --- a/07-vue2/05-computed-and-watch/starter.js +++ b/07-vue2/05-computed-and-watch/starter.js @@ -11,16 +11,19 @@ new Vue({ computed: { filteredCourses() { // 任务：返回过滤后的课程列表 - return this.courses; + const value = this.keyword.trim().toUpperCase() + return this.courses.filter(item => item.title.toUpperCase().includes(value)) }, matchedCount() { // 任务：返回 filteredCourses 的数量 - return 0; + return this.filteredCourses.length; }, }, watch: { keyword(newValue) { // 任务：在控制台输出关键字变化 + console.log(`筛选关键词：${newValue}`); + }, }, }); diff --git a/07-vue2/06-class-style-and-event/starter.html b/07-vue2/06-class-style-and-event/starter.html index 2967698..857b050 100644 --- a/07-vue2/06-class-style-and-event/starter.html +++ b/07-vue2/06-class-style-and-event/starter.html @@ -1,31 +1,66 @@ - - - - 动态类名、样式和事件 - - - -
-
-

{{ title }}

-

{{ isActive ? "当前卡片已激活" : "点击卡片激活它" }}

-
-
-
-

当前进度：{{ progress }}%

-
-
- - - - + + + + 动态类名、样式和事件 + + + + +
+
+

{{ title }}

+

{{ isActive ? "当前卡片已激活" : "点击卡片激活它" }}

+
+
+
+

当前进度：{{ progress }}%

+
+
+ + + + + + \ No newline at end of file diff --git a/07-vue2/06-class-style-and-event/starter.js b/07-vue2/06-class-style-and-event/starter.js index 1e74241..31b3854 100644 --- a/07-vue2/06-class-style-and-event/starter.js +++ b/07-vue2/06-class-style-and-event/starter.js @@ -9,7 +9,13 @@ new Vue({ toggleCard() { // 任务： // 1. 切换 isActive + this.isActive = !this.isActive // 2. 如果激活了，让 progress 增加到 80 + if (this.isActive) { + this.progress = 80 + } else { + this.progress = 35 + } // 3. 如果取消激活，让 progress 回到 35 }, }, diff --git a/07-vue2/07-lifecycle-and-async/starter.js b/07-vue2/07-lifecycle-and-async/starter.js index 03fcabf..2be2d13 100644 --- a/07-vue2/07-lifecycle-and-async/starter.js +++ b/07-vue2/07-lifecycle-and-async/starter.js @@ -12,19 +12,37 @@ new Vue({ // 1. 模拟异步请求 // 2. 1 秒后给 courses 赋值 // 3. loading 改成 false + console.log("1"); + + const thiz = this + setTimeout(function () { + thiz.courses = [ + { id: 1, title: 'HTML' }, + { id: 2, title: 'CSS' }, + { id: 3, title: 'JS' } + ] + thiz.loading = false + }, 1000) }, updated() { // 任务：在控制台输出 updated 日志 + console.log("更新"); + }, beforeDestroy() { // 任务：在控制台输出 beforeDestroy 日志 + console.log("已销毁"); + }, destroyed() { // 任务：在控制台输出 destroyed 日志 + console.log("销毁完成"); + }, methods: { destroyInstance() { // 任务：调用 this.$destroy() + this.$destroy() }, }, }); diff --git a/07-vue2/08-components-communication-and-final/starter.js b/07-vue2/08-components-communication-and-final/starter.js index 84bc61d..8fb9b2c 100644 --- a/07-vue2/08-components-communication-and-final/starter.js +++ b/07-vue2/08-components-communication-and-final/starter.js @@ -52,15 +52,23 @@ new Vue({ computed: { filteredCourses() { // 任务：根据 keyword 过滤课程列表 - return this.courses; + let value = this.keyword.trim().toUpperCase() + return this.courses.filter(item => item.title.toUpperCase().includes(value)) }, }, methods: { toggleCourse(courseId) { // 任务：根据 courseId 切换 finished + const a = this.courses.find(item => { + if (item.id === courseId) { + item.finished = !item.finished + } + return; + }) }, focusInput() { // 任务：通过 ref 聚焦输入框 + this.$refs.keywordInput.focus() }, }, }); diff --git a/07-vue2/09-final-course-dashboard/starter.js b/07-vue2/09-final-course-dashboard/starter.js index 8e77a61..ad0339e 100644 --- a/07-vue2/09-final-course-dashboard/starter.js +++ b/07-vue2/09-final-course-dashboard/starter.js @@ -49,31 +49,49 @@ new Vue({ // 任务： // 1. 先按 statusFilter 过滤 // 2. 再按 keyword 过滤标题 - return this.courses; + let value = this.keyword.trim().toUpperCase() + let a + if (this.statusFilter === "all") { + a = this.courses.filter(item => item.title.toUpperCase().includes(value)) + } else if (this.statusFilter === "done") { + const b = this.courses.filter(item => item.finished === true) + a = b.filter(item => item.title.toUpperCase().includes(value)) + } else if (this.statusFilter === "doing") { + const b = this.courses.filter(item => item.finished === false) + a = b.filter(item => item.title.toUpperCase().includes(value)) + } + return a }, totalCount() { return this.courses.length; }, finishedCount() { // 任务：返回已完成课程数量 - return 0; + const b = this.courses.filter(item => item.finished === true) + return b.length }, visibleCount() { // 任务：返回当前筛选后的数量 - return 0; + const a = this.filteredCourses + return a.length; }, }, watch: { keyword(newValue) { // 任务：在控制台输出关键字变化 + console.log(`关键词：${newValue}`); + }, }, methods: { toggleCourse(courseId) { // 任务：根据 courseId 切换 finished + const a = this.courses.find(item => item.id === courseId) + a.finished = !a.finished }, focusSearch() { // 任务：通过 ref 聚焦输入框 + this.$refs.searchInput.focus() }, }, });