Part1.初识Vue和安装

一、安装Vue

方式一：直接CDN引入

你可以选择引入开发环境版本还是生产环境版本

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js 
生产环境 https://vuejs.org/js/vue.min.js

方式三：NPM安装

后续通过webpack和CLI的使用，我们使用该方式。

二、Vue中的MVVM

View层：

• 视图层
• 在我们前端开发中，通常就是DOM层。
• 主要的作用是给用户展示各种信息。

Model层：

• 数据层
• 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
• 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层：

• 视图模型层
• 视图模型层是View和Model沟通的桥梁。
• 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
• 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

PS：Vue帮助我们完成VueModel层的任务，也就是将dom元素展示的数据和obj的数据绑定，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了！

三、创建Vue实例传入的options

el:

类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。

data:

类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。

methods:

类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

四、Vue的生命周期