exercises.md 2.7 KB
Newer Older
Z
zhaoss 已提交
1 2
# Vue实例

Z
zhaoss 已提交
3
 <div style="color: pink;font-size:24px">小常识:</div>
Z
zhaoss 已提交
4

Z
zhaoss 已提交
5
快来开始我们的第一个Vue小案例吧!<br/>
Z
zhaoss 已提交
6 7 8
1.首先你可以创建一个html文件:initA.html(文件名称随心就好)<br/>
<br/>![在这里插入图片描述](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)
<br/>
Z
zhaoss 已提交
9 10
<br/>

Z
zhaoss 已提交
11
2.通过script标签引入Vue<br/>
Z
修改  
zhaoss 已提交
12

Z
zhaoss 已提交
13
```html
Z
修改  
zhaoss 已提交
14 15 16 17 18 19
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
或者:

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
Z
zhaoss 已提交
20
```
Z
zhaoss 已提交
21

Z
修改  
zhaoss 已提交
22
<br/>
Z
测试  
zhaoss 已提交
23

Z
修改  
zhaoss 已提交
24 25 26
![在这里插入图片描述](https://img-blog.csdnimg.cn/713629c551e543119001df0f8491f9bf.png)

<br/>
Z
zhaoss 已提交
27
<br/>
Z
zhaoss 已提交
28

Z
zhaoss 已提交
29
3.开始初始化我们的第一个小实例<br/>
Z
zhaoss 已提交
30

Z
zhaoss 已提交
31 32
<br/>![在这里插入图片描述](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)
<br/>
Z
zhaoss 已提交
33 34
<br/>
我们猜想的打开页面后应该是页面是出现 你好,几何心凉! 让我们看一下结果<br/>
Z
zhaoss 已提交
35 36
<br/>![在这里插入图片描述](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)
<br/>
Z
zhaoss 已提交
37

Z
zhaoss 已提交
38 39
果然翻车了!

Z
zhaoss 已提交
40 41
<br/>

Z
zhaoss 已提交
42
4.问题解决<br/>
Z
zhaoss 已提交
43
这是因为我们引入的位置在{{ message }}的后面了 所以浏览器根本不认识 我们将`<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>`提到head中去即可<br/>
Z
zhaoss 已提交
44 45
<br/>![在这里插入图片描述](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)
<br/>
Z
zhaoss 已提交
46 47
<br/>
测试<br/>
Z
zhaoss 已提交
48 49
<br/>![在这里插入图片描述](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/>
Z
zhaoss 已提交
50
<br/>
Z
zhaoss 已提交
51 52 53 54
赶快去体验一下吧!!!

<br>

Z
zhaoss 已提交
55
 <div style="color: blue;font-size:24px">小测试:</div>
Z
zhaoss 已提交
56
 
Z
zhaoss 已提交
57 58 59 60
A.初始化组件依赖注入内容<br/>
B.初始化组件生命周期标识符<br/>
C.实例化属性合并,包含extend/mixins属性<br/>
D.初始化事件系统<br/>
Z
zhaoss 已提交
61

Z
zhaoss 已提交
62 63
上面是Vue实例挂载过程的不同阶段,请选择他们的正确顺序是?<br/><br/>

Z
zhaoss 已提交
64 65 66 67 68 69 70 71 72 73

## 答案

B D C A

## 选项

### A

A B C D
L
luxin 已提交
74

Z
zhaoss 已提交
75 76 77 78 79 80 81
### B

C A B D

### C

B C A D