创建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>
原文地址：https://www.cnblogs.com/lihuijuan/p/10058007.html