From b7c2cfeb1c7f640f08f5a31026fe20bdb4803641 Mon Sep 17 00:00:00 2001 From: zhaoss Date: Thu, 7 Apr 2022 17:46:23 +0800 Subject: [PATCH] =?UTF-8?q?Vue=E5=88=9D=E9=98=B6=E4=B9=A0=E9=A2=98/?= =?UTF-8?q?=E5=B8=B8=E8=AF=86=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../exercises.md" | 5 +- .../exercises.md" | 5 +- .../exercises.md" | 5 +- .../4.Vue\345\222\214jQuery/exercises.md" | 4 +- .../exercises.json" | 2 +- .../exercises.md" | 16 ++-- .../exercises.json" | 2 +- .../exercises.md" | 4 +- .../exercises.json" | 2 +- .../exercises.md" | 4 +- .../exercises.json" | 2 +- .../exercises.md" | 4 +- .../exercises.json" | 2 +- .../exercises.md" | 49 +++++++++--- .../exercises.json" | 2 +- .../exercises.md" | 14 ++-- .../config.json" | 0 .../exercises.json" | 2 +- .../exercises.md" | 76 +++++++++++++++++++ .../exercises.md" | 30 -------- .../exercises.md" | 29 ------- .../config.json" | 0 .../exercises.json" | 2 +- .../exercises.md" | 55 ++++++++++++++ .../config.json" | 0 .../exercises.json" | 2 +- .../exercises.md" | 64 ++++++++++++++++ .../exercises.json" | 2 +- .../exercises.md" | 15 ++-- .../exercises.json" | 2 +- .../exercises.md" | 37 +++++---- .../exercises.md" | 29 ------- .../config.json" | 0 .../exercises.json" | 2 +- .../exercises.md" | 23 +++--- .../exercises.json" | 2 +- .../exercises.md" | 38 ++++++++-- .../5.v-model/1.v-model/exercises.json" | 2 +- .../5.v-model/1.v-model/exercises.md" | 55 ++++++++++++-- .../exercises.json" | 2 +- .../exercises.md" | 19 +++-- .../config.json" | 4 +- .../exercises.json" | 7 ++ .../exercises.md" | 71 +++++++++++++++++ .../2.Object.defineProperty()/exercises.json" | 2 +- data/tree.json | 38 +++++----- 46 files changed, 508 insertions(+), 224 deletions(-) rename "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/config.json" => "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/config.json" (100%) rename "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.json" => "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.json" (85%) create mode 100644 "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.md" delete mode 100644 "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md" delete mode 100644 "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.md" rename "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/config.json" => "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/config.json" (100%) rename "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json" => "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json" (85%) create mode 100644 "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md" rename "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/config.json" => "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/config.json" (100%) rename "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.json" => "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.json" (85%) create mode 100644 "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.md" delete mode 100644 "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.md" rename "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/config.json" => "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/config.json" (100%) rename "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.json" => "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.json" (85%) rename "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.md" => "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.md" (51%) create mode 100644 "data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/exercises.json" create mode 100644 "data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/exercises.md" diff --git "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/1.Vue\347\256\200\344\273\213/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/1.Vue\347\256\200\344\273\213/exercises.md" index b55b8e0..98ba24b 100644 --- "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/1.Vue\347\256\200\344\273\213/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/1.Vue\347\256\200\344\273\213/exercises.md" @@ -1,7 +1,6 @@ - # Vue简介 - **几何小常识:** +
**几何小常识:**
![在这里插入图片描述](https://img-blog.csdnimg.cn/77385b1b457f4d53bcb6ca2aa7f1fba9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) @@ -11,7 +10,7 @@
- **心凉小测试:** +
**心凉小测试:**
结合上面小常识,下列对Vue描述 不正确 的是?

diff --git "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/2.MVVM\345\223\215\345\272\224\345\274\217/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/2.MVVM\345\223\215\345\272\224\345\274\217/exercises.md" index 49649a7..edd344b 100644 --- "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/2.MVVM\345\223\215\345\272\224\345\274\217/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/2.MVVM\345\223\215\345\272\224\345\274\217/exercises.md" @@ -1,7 +1,6 @@ - # MVVM响应式 - **几何小常识:** +
**几何小常识:**
![在这里插入图片描述](https://img-blog.csdnimg.cn/18708ee196b14290b42f085d798b3dc7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) View层体现为浏览器中的DOM树,View-Model则体现为近几年特别流行的虚拟DOM树,Model则体现为业务逻辑和ORM。 @@ -10,7 +9,7 @@ View层体现为浏览器中的DOM树,View-Model则体现为近几年特别流
- **心凉小测试:** +
**心凉小测试:**
以下对于MVVM说法正确的是?

diff --git "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/3.MVVM\344\274\230\347\202\271/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/3.MVVM\344\274\230\347\202\271/exercises.md" index e491389..ed6827d 100644 --- "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/3.MVVM\344\274\230\347\202\271/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/3.MVVM\344\274\230\347\202\271/exercises.md" @@ -1,14 +1,13 @@ - # MVVM优势 - **几何小常识:** +
**几何小常识:**
MVC 是开发客户端最经典的设计模式,但是 MVC 有让人无法忽视的严重问题。在通常的开发中,除了简单的 Model、View 以外的所有部分都被放在了 Controller 里面。Controller 负责显示界面、响应用户的操作、网络请求以及与 Model 交互。随着业务逻辑的增加,controller的处理逻辑会变得越来越复杂,controller也就慢慢的变得越来越胖,这就造成了Controller逻辑复杂,难以维护。为了更好地管理代码,更方便地扩展业务,为必要为controller瘦身,于是MVVM便呼之欲出。
- **心凉小测试:** +
**心凉小测试:**
关于MVVM优点描述以下 不正确 的是?

diff --git "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/4.Vue\345\222\214jQuery/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/4.Vue\345\222\214jQuery/exercises.md" index cbbbd31..75719fd 100644 --- "a/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/4.Vue\345\222\214jQuery/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/1.Vue\346\230\257\344\273\200\344\271\210\357\274\237/4.Vue\345\222\214jQuery/exercises.md" @@ -1,6 +1,6 @@ # Vue和jQuery - **几何小常识:** +
**几何小常识:**
![在这里插入图片描述](https://img-blog.csdnimg.cn/91c59444c19e412099d8fb454baa053e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) jQuery是使用选择器(`$`)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:`$("lable").val();`,它还是依赖DOM元素的值。 @@ -9,7 +9,7 @@ Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行
- **心凉小测试:** +
**心凉小测试:**
下列对于Vue和JQuery的描述不正确的是?

diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.json" index 587bcd7..f0f7d6a 100644 --- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "fcbf69b0702e4bbd852bc71eed4bff21" diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md" index 5bff047..925dc13 100644 --- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/1.Node\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/exercises.md" @@ -1,12 +1,12 @@ # Node简介 +
**几何小常识:**
- **几何小常识:** -### 1.Node是什么 +1.Node是什么 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时(运行环境),如浏览器也是js的运行环境,Node 也是JS的运行环境,但是将JS代码的应用场景扩展到了服务器端 -## 2.Node运行环境搭建 +2.Node运行环境搭建 -### 2.1安装 +2.1安装 打开 [Node官网](https://nodejs.org) @@ -78,9 +78,9 @@ node -v ![在这里插入图片描述](https://img-blog.csdnimg.cn/3c512e87ff604e8f80520026347627a7.png) -### 2.2环境安装失败解决办法 +2.2环境安装失败解决办法 -#### 2.2.1 错误代号 2502/2503 +2.2.1 错误代号 2502/2503 表示当前登录系统的用户权限不足。 @@ -96,7 +96,7 @@ node -v ![在这里插入图片描述](https://img-blog.csdnimg.cn/1881aa722cc04ced8b00615428bf0d48.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) -#### 2.2.2 环境变量问题 +2.2.2 环境变量问题 在 powershell 中输入 node -v 时,会提示 node 不是可识别的命令类似的错误信息,原因在于,没有将node可执行程序路径添加到环境变量中 @@ -105,7 +105,7 @@ node -v
- **心凉小测试:** +
**心凉小测试:**
下列关于Node的描述 不正确 的是?

diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.json" index 2717221..68115ea 100644 --- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "a0a9cdd4d6174efbae431e5e639e9b58" diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.md" index ad4951d..38af13d 100644 --- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/2.NPM\345\221\275\344\273\244/exercises.md" @@ -1,12 +1,12 @@ # NPM命令 - **几何小常识:** +
**几何小常识:**
![在这里插入图片描述](https://img-blog.csdnimg.cn/d5316fd17a3c4c2cae007f1004c5fc28.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) 安装node成功后,我们就可以使用npm,我们了解到npm有非常多的命令来供我们开发使用,赶快去尝试一下这些命令吧!!!
- **心凉小测试:** +
**心凉小测试:**
关于npm常用命令不正确的是?

diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.json" index 1979d6a..ba998b2 100644 --- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "98e858bbaf914615b63bbe8e56c93672" diff --git "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.md" index 78d89ac..8d31115 100644 --- "a/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/2.Node.js\345\222\214npm/3.CNPM\345\256\211\350\243\205/exercises.md" @@ -1,6 +1,6 @@ # CNPM安装 - **几何小常识:** +
**几何小常识:**
大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。 @@ -20,7 +20,7 @@ $ cnpm install [name]
- **心凉小测试:** +
**心凉小测试:**
关于cnpm下列说法不正确的是?

diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.json" index 04d9813..584986d 100644 --- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "3a5e5d6a59794d219b4a1e9b187d7b67" diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.md" index 366ee75..19c952b 100644 --- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/1.Vue\345\256\211\350\243\205/exercises.md" @@ -1,6 +1,6 @@ # Vue安装 - **几何小常识:** +
**几何小常识:**
Vue官网为我们提供了多种Vue的安装方式,大家选择自己认为比较方便,比较喜欢的一种就行,因为我们前面学习了npm的使用,在这里小编推荐大家使用npm哦 npm![在这里插入图片描述](https://img-blog.csdnimg.cn/b686cd2da3964c4d889858ecf044f82d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) 命令行工具(如果大家已经接触过Vue,可以使用这种方式) @@ -11,7 +11,7 @@
- **心凉小测试:** +
**心凉小测试:**
关于vue的安装下列说法不正确的是?

diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.json" index 71fa140..03490b3 100644 --- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "3933b22ba2fd4df9b19b8d32513c5617" diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.md" index d609c4a..8dc0d2f 100644 --- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/2.Vue\345\256\236\344\276\213/exercises.md" @@ -1,19 +1,46 @@ -# Vue生命周期 - - - - -
-✨ -心凉小测试:

+# Vue实例 + +
几何小常识:
+ +快来开始我们的第一个Vue小案例吧! +1. 首先你可以创建一个html文件:initA.html(文件名称随心就好) +![在这里插入图片描述](https://img-blog.csdnimg.cn/76db4a33cbb3405ea1916d9193592038.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) +2. 通过script标签引入Vue + + ```html + + + 或者: + + + + ``` + ![在这里插入图片描述](https://img-blog.csdnimg.cn/713629c551e543119001df0f8491f9bf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) +3. 开始初始化我们的第一个小实例 +![在这里插入图片描述](https://img-blog.csdnimg.cn/644cf853a6e949fa8cbe4837e8dc3256.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) +我们猜想的打开页面后应该是页面是出现 你好,几何心凉! 让我们看一下结果 +![在这里插入图片描述](https://img-blog.csdnimg.cn/f157a3a7de9d4c98a5e5c984bc886f07.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) +果然翻车了! + + +4. 问题解决 +这是因为我们引入的位置在{{ message }}的后面了 所以浏览器根本不认识 我们将``提到head中去即可 +![在这里插入图片描述](https://img-blog.csdnimg.cn/ebd1020c48a4485386ed03f152fff537.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) +测试 +![在这里插入图片描述](https://img-blog.csdnimg.cn/b278c0dc2eba41059215b7ed18d2d43b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) +赶快去体验一下吧!!! + +
+ +
**心凉小测试:**
+ A.初始化组件依赖注入内容 B.初始化组件生命周期标识符 C.实例化属性合并,包含extend/mixins属性 D.初始化事件系统 -上面是Vue实例挂载过程的不同阶段,请选择他们的正确顺序?

+上面是Vue实例挂载过程的不同阶段,请选择他们的正确顺序是?

+ ## 答案 diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.json" index 7c560d2..5e78cfd 100644 --- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "8db420f2125b446fb6836839115c2137" diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.md" index 9c01aa0..4eaffca 100644 --- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/3.Vue\347\224\237\345\221\275\345\221\250\346\234\237/exercises.md" @@ -1,12 +1,14 @@ # Vue生命周期 -✨ -几何小常识:

-Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。 +
几何小常识:
+ +![在这里插入图片描述](https://img-blog.csdnimg.cn/72af614bcc1647ae880f77053d130483.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) +Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。每一个生命周期中我们都可以进行很多操作来帮助我们完成项目需求,比如我们可以再页面初始化的生命周期函数中去请求接口。 + +
+ +
**心凉小测试:**
-
-✨ -心凉小测试:

Vue页面初始化时会执行哪几个生命周期函数?

diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/config.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/config.json" similarity index 100% rename from "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/config.json" rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/config.json" diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.json" similarity index 85% rename from "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.json" rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.json" index 7001016..f8b0b0c 100644 --- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "fa86af9c11bb4629800d8ec89fdc2b54" diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.md" new file mode 100644 index 0000000..15ac364 --- /dev/null +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.Vue\346\214\207\344\273\244/exercises.md" @@ -0,0 +1,76 @@ +# Vue指令 + +
几何小常识:
+ + Vue指令在我们开发中使用占比很大的一部分,它让我们对数据在Dom渲染过程中起到润滑作用,巧妙的使用Vue指令让我们Dom渲染更加灵活,在某些业务的实现中Vue指令也是不可或缺的!让我们看看哪些常见的Vue指令吧! +**v-text** +更新元素的 textContent。如果要更新部分的 textContent,需要使用 {{ Mustache }} 插值。 +示例: +```html + + +{{msg}} +``` +**v-html** +更新元素的 innerHTML。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。 + +```html +
+``` +**v-show** +根据表达式之真假值,切换元素的 display CSS property。 + +当条件变化时该指令触发过渡效果。 + +```html +
+``` +**v-if v-else** +根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 + +```html +
+ Now you see me +
+
+ Now you don't +
+``` +**v-for** +基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression,为当前遍历的元素提供别名: +```html +
+ {{ item.text }} +
+``` +另外也可以为数组索引指定别名 (或者用于对象的键): + +```html +
+
+
+``` +后面还有v-on v-bind v-model v-slot v-pre v-cloak等指令,大家可以在下面自己去尝试他们巧妙的作用 +
+ +
心凉小测试:
+ +看到上面众多Vue指令,我们可以想到 v-show和v-if都是根据绑定一个布尔值来切换dom的展示,那么他们有区别吗?

+ +## 答案 + +有区别,v-show是根据条件为Dom元素添加 display:none 与否来实现的;而v-if是根据条件操作绑定Dom是否存留在Dom树上实现的 + +## 选项 + +### A + +没有区别 + +### B + +有区别,v-if是根据条件为Dom元素添加 display:none 与否来实现的;而v-show是根据条件操作绑定Dom是否存留在Dom树上实现的 + +### C + +有区别,v-show是根据条件为Dom元素修改 display的值为none还是为block来实现的;而v-if是根据条件操作绑定Dom是否存留在Dom树上实现的 diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md" deleted file mode 100644 index 871df9a..0000000 --- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md" +++ /dev/null @@ -1,30 +0,0 @@ -# 计算属性 - - - - -
-✨ -心凉小测试:

-下列关于计算属性的说法正确的是?

- -## 答案 - -计算属性的getter和setter参数不是固定的 - -## 选项 - -### A - -computed中的函数必须要用return返回 - -### B - -计算属性不会进行缓存 - -### C - -computed默认默认第一次加载不做监听 - diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.md" deleted file mode 100644 index e0c6631..0000000 --- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.md" +++ /dev/null @@ -1,29 +0,0 @@ -# 侦听器 - - - - -
-✨ -心凉小测试:

-下列关于watch的说法不正确的是?

- -## 答案 - -watch 不支持异步 - -## 选项 - -### A - -watch 不支持缓存,数据改变或者触发重新渲染时,直接会触发相应的操作 - -### B - -监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据 - -### C - -为了监听对象内部值的变化,和复杂类型的数据时使用deep深度监听 diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/config.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/config.json" similarity index 100% rename from "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/config.json" rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/config.json" diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json" similarity index 85% rename from "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json" rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json" index c1a2d3b..d23954f 100644 --- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/4.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "661687fd94f040138c0bee725e7e912f" diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md" new file mode 100644 index 0000000..215bbea --- /dev/null +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\350\256\241\347\256\227\345\261\236\346\200\247/exercises.md" @@ -0,0 +1,55 @@ +# 计算属性 + +
几何小常识:
+ 计算属性在我们的Vue中是相当常见的,很多的业务逻辑中我们都有遇到过需要用到计算属性的地方,下面是小编为大家展示计算属性最简单粗暴的用法,是不是很简单呢,其实在我们的项目开发中计算属性可以写很多复杂的逻辑。 + 比如我们在一个报表中有一列是展示员工工资,我们这一列的得数是依照前面各项总和再根据各种汇算我们为了dom代码中的简洁,完全可以利用到我们的计算属性 + +```javascript + +
+ {{ message }}
+ 您的银行卡余额为{{b}} +
+ + +``` + +运行结果为: +![在这里插入图片描述](https://img-blog.csdnimg.cn/a6e06b50a4094cf9a7d80228f6f81d64.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) + +
+ +
**心凉小测试:**
+ +下列关于计算属性的说法正确的是?

+ +## 答案 + +计算属性的 getter 和 setter 参数不是固定的 + +## 选项 + +### A + +computed 中的函数必须要用 return 返回 + +### B + +计算属性不会进行缓存 + +### C + +computed 默认默认第一次加载不做监听 diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/config.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/config.json" similarity index 100% rename from "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/config.json" rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/config.json" diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.json" similarity index 85% rename from "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.json" rename to "data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.json" index 867f044..83a2b36 100644 --- "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/5.\344\276\246\345\220\254\345\231\250/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "2d48a438acfa491cbd0a22d4d5adeb7d" diff --git "a/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.md" new file mode 100644 index 0000000..ec183b6 --- /dev/null +++ "b/data/1.Vue\345\210\235\351\230\266/3.Vue\345\256\236\344\276\213/6.\344\276\246\345\220\254\345\231\250/exercises.md" @@ -0,0 +1,64 @@ +# 侦听器 + +
几何小常识:
+ +```javascript + +
+ + +

请输入你的幸运数字

+ +

{{text}}

+
+ + +``` +![在这里插入图片描述](https://img-blog.csdnimg.cn/cc8f1a8bee02416aab90c4ee26534dc1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) + + +前面我们看到了计算属性的强大,现在为大家介绍另一彪悍——侦听器,小编编写了上面代码,随着我们在输入框中输入数字的变化,文本框下面会出现一段话,而且会甄别出我们刚刚输入的值,以及当前输入的值,所以我们可以看出计算属性可以帮助我们处理一些计算逻辑数据,而侦听器会检测到我们数据的变化,我们就可以完成很多业务逻辑,思考下:他们两者可以互通使用么? +
+ +
心凉小测试:
+ +下列关于watch的说法不正确的是?

+ +## 答案 + +watch 不支持异步 + +## 选项 + +### A + +watch 不支持缓存,数据改变或者触发重新渲染时,直接会触发相应的操作 + +### B + +监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据 + +### C + +为了监听对象内部值的变化,和复杂类型的数据时使用deep深度监听 diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.json" index 8c495d3..2be76c8 100644 --- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "4c0220902a95459c986531007c7be4ff" diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.md" index 84cb3cd..d2f07d1 100644 --- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/1.\346\217\222\345\200\274\350\241\250\350\276\276\345\274\217/exercises.md" @@ -1,14 +1,6 @@ # 侦听器 - - - - -
-✨ -心凉小测试:

+
几何小常识:
```js new Vue({ @@ -28,6 +20,11 @@ new Vue({ }) ``` +
+ +
心凉小测试:
+ + 参照上面代码段,下列表达式不能正常渲染的是?

## 答案 diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.json" index 7180d2d..db5773a 100644 --- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "717faf11d8f840c0a98906917d63d265" diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.md" index 019b2be..fce8f6e 100644 --- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/2.Vue\350\277\207\346\273\244\345\231\250/exercises.md" @@ -1,28 +1,37 @@ -# 侦听器 +# 过滤器 - - - +
几何小常识:
+ + +![在这里插入图片描述](https://img-blog.csdnimg.cn/911c940ef6124eeca866661b857c0648.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_19,color_FFFFFF,t_70,g_se,x_16) +上面是小编在项目中编写的时间过滤器,并在下面dom中进行使用 -
-✨ -心凉小测试:

+```html + +

日期是:{{initDate | dateForm}}

+``` -![在这里插入图片描述](https://img-blog.csdnimg.cn/9108fb0b07284150b6d66f6fec6d8c01.png) -![在这里插入图片描述](https://img-blog.csdnimg.cn/911c940ef6124eeca866661b857c0648.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_19,color_FFFFFF,t_70,g_se,x_16) +
+
心凉小测试:
-观察上面图片中的代码,对Vue过滤器使用方法是否正确?

+观察上面图片中的代码,运行后p标签中展示的是?

## 答案 -正确 +2022-04-07 16:33:07 ## 选项 ### A -错误 +1649320387776 | undefined + +### B + +1649320387776 + +### C + +t diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.md" deleted file mode 100644 index bd4b42c..0000000 --- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.Vue\346\214\207\344\273\244/exercises.md" +++ /dev/null @@ -1,29 +0,0 @@ -# Vue指令 - - - - -
-✨ -心凉小测试:

-vue的自定义指令错误的是?

- -## 答案 - -oldVNode:上一个VNode,只在update钩子函数中有效。 - -## 选项 - -### A - -bind函数:只调用一次,指令第一次绑定在元素上调用,即初始化调用一次。 - -### B - -inserted函数:并绑定元素插入父级元素(即new vue中el绑定的元素)时调用(此时父级元素不一定转化为了dom)。 - -### C - -update函数:在元素发生更新时就会调用,可以通过比较新旧的值来进行逻辑处理。 diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/config.json" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/config.json" similarity index 100% rename from "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/config.json" rename to "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/config.json" diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.json" similarity index 85% rename from "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.json" rename to "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.json" index f1a2898..df20878 100644 --- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "0ec57019306645e0a597ec6eeef94610" diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.md" similarity index 51% rename from "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.md" rename to "data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.md" index 9714c99..dcf6539 100644 --- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/5.class\345\222\214style\347\273\221\345\256\232/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/3.class\345\222\214style\347\273\221\345\256\232/exercises.md" @@ -1,13 +1,6 @@ -# Vue 修饰符 +# :class和:style - - - -
-✨ -心凉小测试:

+
几何小常识:
```js new Vue({ @@ -20,11 +13,15 @@ new Vue({ }) ``` +
+ +
心凉小测试:
+ 下列对class使用错误的是?

## 答案 -```js +```html

日期:

``` @@ -33,18 +30,18 @@ new Vue({ ### A -```js +```html

日期:

``` ### B -```js +```html

日期:

``` ### C -```js +```html

日期:

``` diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.json" index bddcfc0..c8c0e81 100644 --- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "c5870e6150564612952fc40507910900" diff --git "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.md" index 30071a2..8e28122 100644 --- "a/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/4.Vue\346\250\241\346\235\277/4.\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\343\200\201\346\214\211\351\224\256\344\277\256\351\245\260\347\254\246\343\200\201\347\263\273\347\273\237\344\277\256\351\245\260\347\254\246/exercises.md" @@ -1,13 +1,35 @@ # Vue修饰符 - - - -
-✨ -心凉小测试:

+
几何小常识:
+ +**事件修饰符** +在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。 + +**按键修饰符** +在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: + +```html + + +``` + +你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。 + +```html + +``` + +在上述示例中,处理函数只会在 $event.key 等于 PageDown 时被调用。 + + +**系统修饰键** +![在这里插入图片描述](https://img-blog.csdnimg.cn/e89305e0ac7c4410b17911523e841e47.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) + + +
+ +
心凉小测试:
+ 下列对vue常用的修饰符描述错误的是?

## 答案 diff --git "a/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.json" "b/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.json" index 0775eef..058f902 100644 --- "a/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.json" +++ "b/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "ec401fd5fc6045e69def928c11064719" diff --git "a/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.md" "b/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.md" index f9ee190..71453ba 100644 --- "a/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.md" +++ "b/data/1.Vue\345\210\235\351\230\266/5.v-model/1.v-model/exercises.md" @@ -1,12 +1,53 @@ -# Vue简介 +# v-model - +
几何小常识:
+ + v-model 指令我们大家很熟悉了吧,该指令可以在表单