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
1. 首先你可以创建一个html文件:initA.html(文件名称随心就好)<br/>
Z
zhaoss 已提交
7
![在这里插入图片描述](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)
Z
zhaoss 已提交
8 9 10
<br/>

2. 通过script标签引入Vue<br/>
Z
zhaoss 已提交
11 12 13 14 15 16 17 18 19
	
	```html
	<!-- 开发环境版本,包含了有帮助的命令行警告 -->
	<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 21
	<br/>

Z
zhaoss 已提交
22
	![在这里插入图片描述](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)
Z
zhaoss 已提交
23 24 25
	<br/>

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

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

Z
zhaoss 已提交
32 33
果然翻车了!

Z
zhaoss 已提交
34 35 36 37
<br/>

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

<br>

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

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

Z
zhaoss 已提交
56 57 58 59 60 61 62 63 64 65

## 答案

B D C A

## 选项

### A

A B C D
L
luxin 已提交
66

Z
zhaoss 已提交
67 68 69 70 71 72 73
### B

C A B D

### C

B C A D