# Vue实例

 <div style="color: pink;font-size:24px">小常识：</div>

快来开始我们的第一个Vue小案例吧！<br/>
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/>
<br/>

2.通过script标签引入Vue<br/>
	
```html
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	或者：
	
	<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```
	<br/>

	<br/>![在这里插入图片描述](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)
<br/>
	<br/>

3.开始初始化我们的第一个小实例<br/>

<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/>
<br/>
我们猜想的打开页面后应该是页面是出现 你好，几何心凉！ 让我们看一下结果<br/>
<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/>

果然翻车了！

<br/>

4.问题解决<br/>
这是因为我们引入的位置在{{ message }}的后面了 所以浏览器根本不认识 我们将`<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>`提到head中去即可<br/>
<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/>
<br/>
测试<br/>
<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/>
<br/>
赶快去体验一下吧！！！

<br>

 <div style="color: blue;font-size:24px">小测试：</div>
 
A.初始化组件依赖注入内容<br/>
B.初始化组件生命周期标识符<br/>
C.实例化属性合并，包含extend/mixins属性<br/>
D.初始化事件系统<br/>

上面是Vue实例挂载过程的不同阶段，请选择他们的正确顺序是？<br/><br/>


## 答案

B D C A

## 选项

### A

A B C D

### B

C A B D

### C

B C A D