# 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/>


## 答案

B D C A

## 选项

### A

A B C D
  
### B

C A B D

### C

B C A D