Vue是一套用于构建用户界面的渐进式框架，这是官网对Vue的解释。什么是渐进式框架呢？我把它拆分为两块，渐进式和框架，框架好理解，渐进式(Progressive)就是说，如果要使用Vue，不需要对Vue的全部知识都搞明白才能上手做，你可以一步一步逐渐深入的使用Vue.js，它的学习曲线相对平缓。
Vue使用MVVM(Model-View-View-Model)模式，实现View和ViewModel双向绑定（vue的核心功能之一），即视图层（View）发生变化时，会自动更新到视图模型(ViewModel)上，反之亦然。
Vue.js框架可通过两种方式引入，第一种是在html页面中使用script标签引入vue.js，第二种是使用npm的方式安装vue。本系列前期不涉及前端工程化的内容，所以，使用script标签的方式引入vue.js即可。
Vue实例
引入Vue.js框架后，使用new Vue()创建一个vue的实例。在创建vue实例时，构造函数的配置参数是可选的，如果不传入配置参数，则生成一个空实例（比如，推荐使用vue空实例作为中央事件总线bus），更多的情况是要传人配置信息的，配置参数以对象的形式传入vue的构造函数。
<body>
<div id="app">{{message}}</div>
<!--vue.js框架引入-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//创建Vue实例，使用对象的方式传入配置项
const vm = new Vue({
el:"#app",
data:{
message:"Hello World!"
}
});
</script>
</body>
在上面的代码中，vue的实例赋值给vm，这个vm变量就是我们前面提到的ViewModel(视图模型)，可以简单的理解vue实例就是一个视图模型。这里vue.js和创建vue实例的脚本，都放在了body标签的最底部，是因为实例在创建时，需要挂载点元素，如果将脚本放在head标签中，在实例化vue时，DOM还没有被解析，使vue实例找不到对应的挂载点。
创建vue实例时，配置项较多，按功能可分为：DOM类、数据选项类、资源类、组合类、生命周期钩子函数类、其他插件数据类等6大类，下面列出创建vue实例的部分配置项：
new Vue({
//DOM类
el:""|Element,//可以是DOM的Element，实例的挂载点
name:"",//在vue实例作为组件时有效，设置后组件和递归调用自己，全局注册组件ID自动作为组件的name
template:"",//替换挂载点的元素
render(),//渲染函数和template选项一样，返回的内容用于替换挂载点元素，它的优先级比template高
//数据类
data:{}|function,//实例的数据对象，如果实例是组件，用function返回数据对象
props:{}|[],//接收来自父组件的数据
computed:{},//计算属性
watch:{},//监视属性
methods:{},//自定方法
//资源类
directives:{},//自定义指令
filters:{},//过滤器
components:{},//注册子组件
//组合类
mixins:[],//混入的对象包含了vue实例配置选项，当多个组件有同样的功能时，可以使用混入
extends:object|Function,//继承
//生命周期类
beforeCreate(),
created(),
beforeMount(),
Mounted(),
beforeUpdate(),
updated(),
beforeDestory(),
destoryed(),
//其他插件用数据类
router:new VueRouter(),// 路由插件的配置项
store:new Vuex.Store(),// 状态管理插插件配置项
});
本文作为破冰系列的开篇，将讲解几个简单的配置选项，后续随着学习的深入会对这些配置项一一讲解。
el 配置项是element的缩写，表示vue实例的挂载点，它可以是一个html元素，也可以是一个css的选择器，通常使用css的选择器。vue生成的DOM通过el配置项替换掉挂载点元素。
上面提到vue生成的DOM会替换挂载点元素，那vue是根据怎么来生成DOM的呢？实际上，vue是通过以下两种方式生成DOM：
-
template选项 -
render()选项
template选项用于定义生成DOM的模板，它又有两种方式，第一种为直接写入html标签，如：
<script>
const vm = new Vue({
el:"#app",
template:"<h1>Hello World!</h1>",
});
</script>
当html模板内容过于复杂时，使用这种方式效率太低。这时，可以选择第二种方式x-template，代码如下：
<body>
<div id="app"></div>
<script type="x-template" id="temp">
<ul>
<li>张三</li>
<li>李四</li>
</ul>
</script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const vm = new Vue({
el:"#app",
template:"#temp"
});
</script>
</body>
模板包裹在script标签内，script标签的type属性设置为x-template，使用id作为模板的唯一标识符，在vue中的template选项通过css id选择器获取x-template的模板内容。
render函数通过函数编程的方式返回DOM，这里不细说。
data 配置项是Vue实例的数据对象，存放在data中的数据，可以通过vm.$data获取，实例本身也代理了data中的属性，所以，vm.$data.message与vm.message等价。
在创建vue实例时，data中的数据会加入响应式系统中，所谓响应式系统，即当视图引用data属性时，data属性值发生变化后，视图会自动更新。实现响应式系统的原理是：vue通过Object.defineProperty把data属性转化为getter/setter，在触发setter时，关联的组件会重新渲染。关于响应式系统，后面会有专门的章节讨论。
vue实例生命周期
与其它语言一样，一个实例从创建到销毁的过程叫做实例的生命周期。在vue中，实例主要经过创建，挂载，更新（运行），销毁4个阶段。vue为每个阶段提供了2个钩子函数，通过实例创建时的配置项，定义对应的钩子函数内容。生命周期钩子函数：
new Vue({
//初始化阶段
beforeCreate(){},
created(){},
//挂载阶段
beforeMount(){},
Mounted(){},
//运行阶段
beforeUpdate(){},
updated(){},
//销毁阶段
beforeDestory(){},
destoryed(){},
});
beforeCreate()和created()是实例初始化阶段的前后钩子函数，beforeCreated()方法不能访问data、props、watch中定义的属性，也不能访问methods中定义的方法。
常用的是created钩子，在实例创建后调用该钩子函数，所以它可以访问上面的属性和方法。但是，该阶段虽然实例已被创建，不过该实例并没有挂载到DOM上，及DOM还没有被渲染，所以不能操作DOM，这个阶段可以做一些与后台交互的相关操作，比如从服务器上获取初始数据等。
beforeMount()和mounted()是vue实例挂载到DOM前后的钩子函数，beforeMount()在vue将模板渲染为DOM之前调用，mounted()在vue将DOM挂载到挂载点后调用，一般我们的第一个业务逻辑会在这里编写。
beforeUpdate()和updated()钩子函数在实例mounted后，数据更新前后执行。beforeDestroy() 和 destroyed() 钩子函数在组件销毁阶段执行。
beforeDestroy()和destroyed()表示实例销毁前后的调用方法，一般在beforeDestroy()方法中解绑监听事件等。
