创建Vue实例时，使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项}，所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）
如：
new Vue({
//选项配置
el: '#app', components: { App }, template: '<App/>' })
配置项一共可以分为六大类：数据、DOM、生命周期钩子、资源、组合、其他
一、数据
（1）data：Vue根实例或者当前组件上的数据对象，类型可能是纯粹的object形式，但当为组件上的数据时，必须是function类型
当是Vue根实例上时：
new Vue ({ data: { num: 3 } })
当是组件上的数据时：
export default { data: function () { return { num: 3 } } }
（2）computed：计算属性，根据data中的数据需要动态计算的属性。在new根实例和组件中使用的方法和含义都一样，不一一举例（以下所有配置不提名都代表一样）
new Vue({ data: { a: 1 } , computed: { dbA: function(){ return this.a * 2; } } })
如上例中，计算属性dbA是由data数据中的属性得到，使用时和数据属性a是一样的，没有差距
（3）watch：侦听器，监视data中属性的变化，来做出反应
new Vue({ data: { a: 1, dbA:2 }, watch: { a: function(val,oldVal){//监听a的变化，val为变化后的值，oldVal为变化之前的值 this.dbA = val *2 } } })
和计算属性进行对比可以发现，当有一些数据需要随着其他数据变化而变化时，计算属性和侦听器有时均可以实现，要优选计算属性，避免侦听器的滥用！但是当需要在数据变化时执行异步操作或者开销较大的操作时，要是用侦听器
（4）methods：方法的集合，用到的所有方法，定义在其中
new Vue({ data: { a: 1 } , methods: { clickBtn: function(){ this.a++; } } })
(5)props:接受从父组件传过来的数据
在父组件中，使用子组件时：<child v-bind:data1="data1"></child>，通过v-bind把子组件中所需要的数据传递给子组件，在子组件中通过props来接受
子组件中props的格式一般为为：props:['data1','data2',....]或者是 props:{data1:data1Type,data2:data2Type,...}
export default { data () { return { show: true } }, props: { lists: Array } }
（6）porpsData：只能用在new创建的根实例中，主要作用是方便测试
二：DOM
（1）el：只有在new创建的根实例中才有，提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标，可以是一个CSS选择器也可以是一个HTMLElement实例，一般选用CSS选择器中的id来标识
（2）template：一个字符串模板作为Vue实例的标识使用
new Vue({ el: '#app', components: { App }, template: '<App/>' })
（3）render：字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
（4）renderError：当render函数遭遇错误时，提供的另外一种渲染输出
三：生命周期钩子
生命周期钩子即生命周期回调函数,常用的分为以下三种：
（1）初始化阶段（执行一次）：
- beforeCreate(){}，
- created(){},
- beforeMount(){},
- mounted(){},//初始化完成后触发，一般在该回调函数中发送ajax请求或者启动定时器等异步任务
（2）更新阶段（执行0~n次）：
- beforeUpdated(){},
- updated(){}
（3）死亡阶段（执行1次）：
- beforeDestroy(){},//做收尾工作，如：清除定时器
- destroyed(){}
四：资源
（1）components：注册vue实例中可用的组件，是object类型
<template> <div class="container"> <!--使用组件--> <vue-header/> <Menu/> </div> </template> <script> //引入组件 import VueHeader from './components/Header' import Menu from './components/Menu' export default{ components: { //注册组件 VueHeader, Menu } } </script>
（2）directives：注册（自定义）局部指令，自定义的指令只有在当前vue实例中有效
语法：directives:{"diretiveName":function(){}}
（3）filters:定义本地过滤器
filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } //除了上面在一个组件的选项中定义本地的过滤器，也可在在创建 Vue 实例之前全局定义过滤器 Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) new Vue({ // ... })
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>