Skip to content

S
skill_tree_vue

CSDN 技术社区 / skill_tree_vue

通知 5
Star 2
Fork 0
S
skill_tree_vue
提交 b7c2cfeb 编写于 作者: Z zhaoss
浏览文件
操作

Vue初阶习题/常识完善

上级 1cc67389
隐藏空白更改
内联 并排
Showing with 489 addition and 203 deletion
data/1.Vue初阶/1.Vue是什么？/1.Vue简介/exercises.md
浏览文件 @ b7c2cfeb
# Vue简介
<font color="#6495ED" >**几何小常识：**</font>
<div style="#6495ED" >**几何小常识：**</div>
![在这里插入图片描述](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 @@
<br>
<font color="#FF8C00">**心凉小测试：**</font>
<div style="#FF8C00">**心凉小测试：**</div>
结合上面小常识，下列对Vue描述 不正确 的是？<br/><br/>
......
data/1.Vue初阶/1.Vue是什么？/2.MVVM响应式/exercises.md
浏览文件 @ b7c2cfeb
# MVVM响应式
<font color="#6495ED" >**几何小常识：**</font>
<div style="#6495ED" >**几何小常识：**</div>
![在这里插入图片描述](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则体现为近几年特别流
<br>
<font color="#FF8C00">**心凉小测试：**</font>
<div style="#FF8C00">**心凉小测试：**</div>
以下对于MVVM说法正确的是？<br/><br/>
......
data/1.Vue初阶/1.Vue是什么？/3.MVVM优点/exercises.md
浏览文件 @ b7c2cfeb
# MVVM优势
<font color="#6495ED" >**几何小常识：**</font>
<div style="#6495ED" >**几何小常识：**</div>
MVC 是开发客户端最经典的设计模式，但是 MVC 有让人无法忽视的严重问题。在通常的开发中，除了简单的 Model、View 以外的所有部分都被放在了 Controller 里面。Controller 负责显示界面、响应用户的操作、网络请求以及与 Model 交互。随着业务逻辑的增加，controller的处理逻辑会变得越来越复杂，controller也就慢慢的变得越来越胖，这就造成了Controller逻辑复杂，难以维护。为了更好地管理代码，更方便地扩展业务，为必要为controller瘦身，于是MVVM便呼之欲出。
<br>
<font color="#FF8C00">**心凉小测试：**</font>
<div style="#FF8C00">**心凉小测试：**</div>
关于MVVM优点描述以下 不正确 的是？<br/><br/>
......
data/1.Vue初阶/1.Vue是什么？/4.Vue和jQuery/exercises.md
浏览文件 @ b7c2cfeb
# Vue和jQuery
<font color="#6495ED" >**几何小常识：**</font>
<div style="#6495ED" >**几何小常识：**</div>
![在这里插入图片描述](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完全分离开来了。对数据进行
<br>
<font color="#FF8C00">**心凉小测试：**</font>
<div style="#FF8C00">**心凉小测试：**</div>
下列对于Vue和JQuery的描述不正确的是？<br/><br/>
......
data/1.Vue初阶/2.Node.js和npm/1.Node安装与配置/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "fcbf69b0702e4bbd852bc71eed4bff21"
......
data/1.Vue初阶/2.Node.js和npm/1.Node安装与配置/exercises.md
浏览文件 @ b7c2cfeb
# Node简介
<div style="#6495ED" >**几何小常识：**</div>
<font color="#6495ED" >**几何小常识：**</font>
### 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
<br>
<font color="#FF8C00">**心凉小测试：**</font>
<div style="#FF8C00">**心凉小测试：**</div>
下列关于Node的描述 不正确 的是？<br/><br/>
......
data/1.Vue初阶/2.Node.js和npm/2.NPM命令/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "a0a9cdd4d6174efbae431e5e639e9b58"
......
data/1.Vue初阶/2.Node.js和npm/2.NPM命令/exercises.md
浏览文件 @ b7c2cfeb
# NPM命令
<font color="#6495ED" >**几何小常识：**</font>
<div style="#6495ED" >**几何小常识：**</div>
![在这里插入图片描述](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有非常多的命令来供我们开发使用，赶快去尝试一下这些命令吧！！！
<br>
<font color="#FF8C00">**心凉小测试：**</font>
<div style="#FF8C00">**心凉小测试：**</div>
关于npm常用命令不正确的是？<br/><br/>
......
data/1.Vue初阶/2.Node.js和npm/3.CNPM安装/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "98e858bbaf914615b63bbe8e56c93672"
......
data/1.Vue初阶/2.Node.js和npm/3.CNPM安装/exercises.md
浏览文件 @ b7c2cfeb
# CNPM安装
<font color="#6495ED" >**几何小常识：**</font>
<div style="#6495ED" >**几何小常识：**</div>
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
......@@ -20,7 +20,7 @@ $ cnpm install [name]
<br>
<font color="#FF8C00">**心凉小测试：**</font>
<div style="#FF8C00">**心凉小测试：**</div>
关于cnpm下列说法不正确的是？<br/><br/>
......
data/1.Vue初阶/3.Vue实例/1.Vue安装/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "3a5e5d6a59794d219b4a1e9b187d7b67"
......
data/1.Vue初阶/3.Vue实例/1.Vue安装/exercises.md
浏览文件 @ b7c2cfeb
# Vue安装
<font color="#6495ED" >**几何小常识：**</font>
<div style="#6495ED" >**几何小常识：**</div>
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 @@
<br>
<font color="#FF8C00">**心凉小测试：**</font>
<div style="#FF8C00">**心凉小测试：**</div>
关于vue的安装下列说法不正确的是？<br/><br/>
......
data/1.Vue初阶/3.Vue实例/2.Vue实例/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "3933b22ba2fd4df9b19b8d32513c5617"
......
data/1.Vue初阶/3.Vue实例/2.Vue实例/exercises.md
浏览文件 @ b7c2cfeb
# Vue生命周期
<!-- ✨
几何小常识: <br/><br/>
我们在初步了解Vue，看到Vue官方的第一句映入眼帘的就是介绍Vue的读音，所以小伙伴们既然要学习Vue以及将来使用Vue，我们第一步就是要掌握Vue的标准发音 (读音 /vjuː/，类似于 view) -->
<!--## 问题 -->
<br/>
✨
心凉小测试： <br/><br/>
# Vue实例
<div style="color: pink;">几何小常识：</div>
快来开始我们的第一个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
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```
![在这里插入图片描述](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 }}的后面了 所以浏览器根本不认识 我们将`<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>`提到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)
赶快去体验一下吧！！！
<br>
<div style="#FF8C00">**心凉小测试：**</div>
A.初始化组件依赖注入内容
B.初始化组件生命周期标识符
C.实例化属性合并，包含extend/mixins属性
D.初始化事件系统
上面是Vue实例挂载过程的不同阶段，请选择他们的正确顺序？<br/><br/>
上面是Vue实例挂载过程的不同阶段，请选择他们的正确顺序是？<br/><br/>
## 答案
......
data/1.Vue初阶/3.Vue实例/3.Vue生命周期/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "8db420f2125b446fb6836839115c2137"
......
data/1.Vue初阶/3.Vue实例/3.Vue生命周期/exercises.md
浏览文件 @ b7c2cfeb
# Vue生命周期
✨
几何小常识: <br/><br/>
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
<div style="color: pink;">几何小常识：</div>
![在这里插入图片描述](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 的生命周期。每一个生命周期中我们都可以进行很多操作来帮助我们完成项目需求，比如我们可以再页面初始化的生命周期函数中去请求接口。
<br>
<div style="#FF8C00">**心凉小测试：**</div>
<br/>
✨
心凉小测试： <br/><br/>
Vue页面初始化时会执行哪几个生命周期函数？<br/><br/>
......
data/1.Vue初阶/4.Vue模板/3.Vue指令/exercises.json → data/1.Vue初阶/3.Vue实例/4.Vue指令/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "fa86af9c11bb4629800d8ec89fdc2b54"
......
data/1.Vue初阶/3.Vue实例/4.Vue指令/exercises.md 0 → 100644
浏览文件 @ b7c2cfeb
# Vue指令
<div style="color: pink;">几何小常识：</div>
Vue指令在我们开发中使用占比很大的一部分，它让我们对数据在Dom渲染过程中起到润滑作用，巧妙的使用Vue指令让我们Dom渲染更加灵活，在某些业务的实现中Vue指令也是不可或缺的！让我们看看哪些常见的Vue指令吧！
**v-text**
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
示例：
```html
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
```
**v-html**
更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
```html
<div v-html="html"></div>
```
**v-show**
根据表达式之真假值，切换元素的 display CSS property。
当条件变化时该指令触发过渡效果。
```html
<div v-show="isShow"></div>
```
**v-if v-else**
根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
```html
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
```
**v-for**
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：
```html
<div v-for="item in items">
{{ item.text }}
</div>
```
另外也可以为数组索引指定别名 (或者用于对象的键)：
```html
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
```
后面还有v-on v-bind v-model v-slot v-pre v-cloak等指令，大家可以在下面自己去尝试他们巧妙的作用
<br>
<div style="color: pink;">心凉小测试：</div >
看到上面众多Vue指令，我们可以想到 v-show和v-if都是根据绑定一个布尔值来切换dom的展示，那么他们有区别吗？<br/><br/>
## 答案
有区别，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树上实现的
data/1.Vue初阶/3.Vue实例/4.计算属性/exercises.md 已删除 100644 → 0
浏览文件 @ 1cc67389
# 计算属性
<!-- ✨
几何小常识: <br/><br/>
我们在初步了解Vue，看到Vue官方的第一句映入眼帘的就是介绍Vue的读音，所以小伙伴们既然要学习Vue以及将来使用Vue，我们第一步就是要掌握Vue的标准发音 (读音 /vjuː/，类似于 view) -->
<!--## 问题 -->
<br/>
✨
心凉小测试： <br/><br/>
下列关于计算属性的说法正确的是？<br/><br/>
## 答案
计算属性的getter和setter参数不是固定的
## 选项
### A
computed中的函数必须要用return返回
### B
计算属性不会进行缓存
### C
computed默认默认第一次加载不做监听
data/1.Vue初阶/3.Vue实例/5.侦听器/exercises.md 已删除 100644 → 0
浏览文件 @ 1cc67389
# 侦听器
<!-- ✨
几何小常识: <br/><br/>
我们在初步了解Vue，看到Vue官方的第一句映入眼帘的就是介绍Vue的读音，所以小伙伴们既然要学习Vue以及将来使用Vue，我们第一步就是要掌握Vue的标准发音 (读音 /vjuː/，类似于 view) -->
<!--## 问题 -->
<br/>
✨
心凉小测试： <br/><br/>
下列关于watch的说法不正确的是？<br/><br/>
## 答案
watch 不支持异步
## 选项
### A
watch 不支持缓存，数据改变或者触发重新渲染时，直接会触发相应的操作
### B
监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据
### C
为了监听对象内部值的变化，和复杂类型的数据时使用deep深度监听
data/1.Vue初阶/3.Vue实例/4.计算属性/exercises.json → data/1.Vue初阶/3.Vue实例/5.计算属性/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "661687fd94f040138c0bee725e7e912f"
......
data/1.Vue初阶/3.Vue实例/5.计算属性/exercises.md 0 → 100644
浏览文件 @ b7c2cfeb
# 计算属性
<div style="color: pink;">几何小常识：</div>
计算属性在我们的Vue中是相当常见的，很多的业务逻辑中我们都有遇到过需要用到计算属性的地方，下面是小编为大家展示计算属性最简单粗暴的用法，是不是很简单呢，其实在我们的项目开发中计算属性可以写很多复杂的逻辑。
比如我们在一个报表中有一列是展示员工工资，我们这一列的得数是依照前面各项总和再根据各种汇算我们为了dom代码中的简洁，完全可以利用到我们的计算属性
```javascript
<body>
<div id="app">
{{ message }}<br>
您的银行卡余额为{{b}}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，几何心凉!',
a:3,
},
computed: {
b: function () {
return this.a + 1;
}
}
})
</script>
```
运行结果为：
![在这里插入图片描述](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)
<br>
<div style="#FF8C00">**心凉小测试：**</div>
下列关于计算属性的说法正确的是？<br/><br/>
## 答案
计算属性的 getter 和 setter 参数不是固定的
## 选项
### A
computed 中的函数必须要用 return 返回
### B
计算属性不会进行缓存
### C
computed 默认默认第一次加载不做监听
data/1.Vue初阶/3.Vue实例/5.侦听器/exercises.json → data/1.Vue初阶/3.Vue实例/6.侦听器/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "2d48a438acfa491cbd0a22d4d5adeb7d"
......
data/1.Vue初阶/3.Vue实例/6.侦听器/exercises.md 0 → 100644
浏览文件 @ b7c2cfeb
# 侦听器
<div style="color: pink;">几何小常识：</div>
```javascript
<body>
<div id="app">
<!-- {{ message }}<br>
您的银行卡余额为{{b}} -->
<p>请输入你的幸运数字</p>
<input type="text" v-model="num">
<p>{{text}}</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，几何心凉!',
a: 3,
num: '',
text: '',
},
computed: {
b: function () {
return this.a + 1;
}
},
watch: {
num: function (n, o) {
this.text = '你刚才选择了数字' + o + '，，，你现在又选择了' + n + '，，，我认为' + n + '更好'
},
},
})
</script>
```
![在这里插入图片描述](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)
前面我们看到了计算属性的强大，现在为大家介绍另一彪悍——侦听器，小编编写了上面代码，随着我们在输入框中输入数字的变化，文本框下面会出现一段话，而且会甄别出我们刚刚输入的值，以及当前输入的值，所以我们可以看出计算属性可以帮助我们处理一些计算逻辑数据，而侦听器会检测到我们数据的变化，我们就可以完成很多业务逻辑，思考下：他们两者可以互通使用么？
<br>
<div style="color: pink;">心凉小测试：</div>
下列关于watch的说法不正确的是？<br/><br/>
## 答案
watch 不支持异步
## 选项
### A
watch 不支持缓存，数据改变或者触发重新渲染时，直接会触发相应的操作
### B
监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据
### C
为了监听对象内部值的变化，和复杂类型的数据时使用deep深度监听
data/1.Vue初阶/4.Vue模板/1.插值表达式/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "4c0220902a95459c986531007c7be4ff"
......
data/1.Vue初阶/4.Vue模板/1.插值表达式/exercises.md
浏览文件 @ b7c2cfeb
# 侦听器
<!-- ✨
几何小常识: <br/><br/>
我们在初步了解Vue，看到Vue官方的第一句映入眼帘的就是介绍Vue的读音，所以小伙伴们既然要学习Vue以及将来使用Vue，我们第一步就是要掌握Vue的标准发音 (读音 /vjuː/，类似于 view) -->
<!--## 问题 -->
<br/>
✨
心凉小测试： <br/><br/>
<div style="color: pink;">几何小常识：</div>
```js
new Vue({
......@@ -28,6 +20,11 @@ new Vue({
})
```
<br>
<div style="color: pink;">心凉小测试：</div >
参照上面代码段，下列表达式不能正常渲染的是？<br/><br/>
## 答案
......
data/1.Vue初阶/4.Vue模板/2.Vue过滤器/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "717faf11d8f840c0a98906917d63d265"
......
data/1.Vue初阶/4.Vue模板/2.Vue过滤器/exercises.md
浏览文件 @ b7c2cfeb
# 侦听器
# 过滤器
<!-- ✨
几何小常识: <br/><br/>
我们在初步了解Vue，看到Vue官方的第一句映入眼帘的就是介绍Vue的读音，所以小伙伴们既然要学习Vue以及将来使用Vue，我们第一步就是要掌握Vue的标准发音 (读音 /vjuː/，类似于 view) -->
<!--## 问题 -->
<div style="color: pink;">几何小常识：</div>
![在这里插入图片描述](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中进行使用
<br/>
✨
心凉小测试： <br/><br/>
```html
<!-- initDate为data中的参数，值为 1649320387776 -->
<p>日期是：{{initDate | dateForm}}</p>
```
![在这里插入图片描述](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)
<br>
<div style="color: pink;">心凉小测试：</div>
观察上面图片中的代码，对Vue过滤器使用方法是否正确？<br/><br/>
观察上面图片中的代码，运行后p标签中展示的是？<br/><br/>
## 答案
正确
2022-04-07 16:33:07
## 选项
### A
错误
1649320387776 | undefined
### B
1649320387776
### C
t
data/1.Vue初阶/4.Vue模板/5.class和style绑定/exercises.json → data/1.Vue初阶/4.Vue模板/3.class和style绑定/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "0ec57019306645e0a597ec6eeef94610"
......
data/1.Vue初阶/4.Vue模板/5.class和style绑定/exercises.md → data/1.Vue初阶/4.Vue模板/3.class和style绑定/exercises.md
浏览文件 @ b7c2cfeb
# Vue 修饰符
# :class和:style
<!-- ✨
几何小常识: <br/><br/>
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。 -->
<!-- ## 问题 -->
<br/>
✨
心凉小测试： <br/><br/>
<div style="color: pink;">几何小常识：</div>
```js
new Vue({
......@@ -20,11 +13,15 @@ new Vue({
})
```
<br>
<div style="color: pink;">心凉小测试：</div >
下列对class使用错误的是？<br/><br/>
## 答案
```js
```html
<p :class="aaa=='aaa'?'':'aaa'">日期：</p>
```
......@@ -33,18 +30,18 @@ new Vue({
### A
```js
```html
<p :class="{'name':'str'}">日期：</p>
```
### B
```js
```html
<p :class="{'name':str}">日期：</p>
```
### C
```js
```html
<p :class="[aaa,bbb]">日期：</p>
```
data/1.Vue初阶/4.Vue模板/4.事件修饰符、按键修饰符、系统修饰符/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "c5870e6150564612952fc40507910900"
......
data/1.Vue初阶/4.Vue模板/4.事件修饰符、按键修饰符、系统修饰符/exercises.md
浏览文件 @ b7c2cfeb
# Vue修饰符
<!-- ✨
几何小常识: <br/><br/>
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。 -->
<!-- ## 问题 -->
<br/>
✨
心凉小测试： <br/><br/>
<div style="color: pink;">几何小常识：</div>
**事件修饰符**
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
**按键修饰符**
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
```html
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
```
你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
```html
<input v-on:keyup.page-down="onPageDown">
```
在上述示例中，处理函数只会在 $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)
<br>
<div style="color: pink;">心凉小测试：</div >
下列对vue常用的修饰符描述错误的是？<br/><br/>
## 答案
......
data/1.Vue初阶/5.v-model/1.v-model/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "ec401fd5fc6045e69def928c11064719"
......
data/1.Vue初阶/5.v-model/1.v-model/exercises.md
浏览文件 @ b7c2cfeb
# Vue简介
# v-model
<!-- ✨
几何小常识: <br/><br/>
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。 -->
<div style="color: pink;">几何小常识：</div>
v-model 指令我们大家很熟悉了吧，该指令可以在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
**文本框**
下面代码中p标签的值会根据上方文本框输入的值的改变而改变。
```html
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
```
**复选框**
```html
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
```
多个复选框
```html
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
```
**选择框**
```html
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
```
上面只是为大家举了几个小案例，当然我们v-model绑定的值一定是我们在data中定义好的！
<br>
<div style="color: pink;">心凉小测试：</div >
<br/>
✨
心凉小测试： <br/><br/>
下列关于 v-model 的说法，哪项是不正确的？<br/><br/>
......
data/1.Vue初阶/5.v-model/2.v-model绑定修饰符/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "40ac51fd2a7c45758f3db98cc5ce4f79"
......
data/1.Vue初阶/5.v-model/2.v-model绑定修饰符/exercises.md
浏览文件 @ b7c2cfeb
# Vue简介
# v-model修饰符
<!-- ✨
几何小常识: <br/><br/>
v-model可以结合trim使用 v-model.trim可以去除输入框的首尾空格，但不能去除中间的空格，可以配合v-model使用的还有很多很多哦！
<div style="color: pink;">几何小常识：</div>
上节我们看到了v-model的运用，那么他还有一些灵活的修饰符可以配合使用，下面就是v-model常用的修饰符
![在这里插入图片描述](https://img-blog.csdnimg.cn/46370cb4f4714ce69acf35b8c330f135.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/0df780c7de4743c0a4285550e4f6d5f2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
<br>
<div style="color: pink;">心凉小测试：</div >
<br/> -->
✨
心凉小测试： <br/><br/>
下列不属于v-model修饰符的是？<br/><br/>
......
data/2.Vue中阶/7.自定义指令/1.注册自定义指令/config.json
浏览文件 @ b7c2cfeb
......@@ -2,7 +2,9 @@
"node_id": "vue-52bb602d32dd4af7b584430431209819",
"keywords": [],
"children": [],
"export": [],
"export": [
"exercises.json"
],
"keywords_must": [],
"keywords_forbid": []
}
\ No newline at end of file
data/2.Vue中阶/7.自定义指令/1.注册自定义指令/exercises.json 0 → 100644
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "29b2f72d9fc243618c1231f512b4e42d"
}
\ No newline at end of file
data/1.Vue初阶/4.Vue模板/3.Vue指令/exercises.md → data/2.Vue中阶/7.自定义指令/1.注册自定义指令/exercises.md
浏览文件 @ b7c2cfeb
# Vue指令
<!-- ✨
几何小常识: <br/><br/>
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。 -->
<!-- ## 问题 -->
<br/>
✨
心凉小测试： <br/><br/>
<div style="color: pink;">几何小常识：</div>
我们通常用的文本框当我们进入页面后需要点击后才会获取焦点的，但是我们可以自定义一个指令为 input ，当页面进入后自动获取焦点，下面就是一个简单的自定义指令的小案例啦 大家可以尝试一下哦！
```javascript
<body>
<div id="app">
<p>请输入你的幸运数字</p>
<input v-focus type="text" v-model="num">
<p>{{text}}</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，几何心凉!',
a: 3,
num: '',
text: '',
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
},
})
</script>
```
上面这种是简单的我们从页面中去定义指令，如果运用较多我们可以进行全局注册
```javascript
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
```
<br>
<div style="color: pink;">心凉小测试：</div>
vue的自定义指令错误的是？<br/><br/>
## 答案
......
data/3.Vue高阶/8.Vue源码解析/2.Object.defineProperty()/exercises.json
浏览文件 @ b7c2cfeb
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "2507b7c552484c5bbabb2fe261726eac"
......
data/tree.json
浏览文件 @ b7c2cfeb
......@@ -175,6 +175,19 @@
"keywords_forbid": []
}
},
{
"Vue指令": {
"node_id": "vue-0d1ca95100b5467d8f10261d53ad1dbf",
"keywords": [
"Vue指令"
],
"children": [],
"keywords_must": [
"Vue指令"
],
"keywords_forbid": []
}
},
{
"计算属性": {
"node_id": "vue-5871649f1f084586a0c98e38685f81e9",
......@@ -244,14 +257,16 @@
}
},
{
"Vue指令": {
"node_id": "vue-0d1ca95100b5467d8f10261d53ad1dbf",
"class和style绑定": {
"node_id": "vue-7da34cba25b941628c19d600aaadb119",
"keywords": [
"Vue指令"
":class",
"动态绑定类名"
],
"children": [],
"keywords_must": [
"Vue指令"
"Vue",
":class"
],
"keywords_forbid": []
}
......@@ -271,21 +286,6 @@
],
"keywords_forbid": []
}
},
{
"class和style绑定": {
"node_id": "vue-7da34cba25b941628c19d600aaadb119",
"keywords": [
":class",
"动态绑定类名"
],
"children": [],
"keywords_must": [
"Vue",
":class"
],
"keywords_forbid": []
}
}
],
"keywords_must": [],
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或