Vue 实例
构造器
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的：
var vm = new Vue({
...
});
在实例化 Vue 时，需要出入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部选项：API 文档
所有的 Vue.js 组件其实都是被扩展的 Vue 实例。
数据与方法
每个 Vue 实例都会代理其 data 对象里的所有的属性，当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
只有这些被代理的属性是响应的，如果在实例创建后添加新的属性到实例上，它是不会触发视图更新的。
除了 data 属性，Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $ ，以便与代理的 data 属性区分:
var data = { a: 1 }
var vm = new Vue({
el: '#eg',
data: data
})
console.log(vm.$el);
console.log("vm.$data:",vm.$data);
})
所以，以_或$开头的属性不会被Vue实例代理，因为它们可能和Vue内置的属性、API方法冲突。
不要在实例属性或者回调函数中使用箭头函数。因为箭头函数绑定父级上下文，所以 this 不会像预想的一样是 Vue 实例。
实例属性和方法的完整列表中查阅 API 参考。
常用选项
1. 数据
1）data
- 类型：Object | Function
- 详细： Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。
实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。
当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。 - 示例：
var data = {a:1};
var vm = new Vue({
el : "#app1",
data : data
});
vm.a; ==>1
vm.$data === data; ==>true
vm.a === vm.$data.a; ==>true
2) props
- 类型：Array(string) | Object
- 详细：用于接收来自父组件的数据。因为组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。
- 示例
Vue.component("mydemo" , {
props : ["message"],
template : "{{message}}"
});
var app2 = new Vue({
el : "#app2"
});
---------------------------------------------------------------------------------------------
// 对象语法，提供校验
Vue.component('props-demo-advanced', {
props: {
// 只检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
3) propsData
- 类型：{ [key : string] : any }
- 详细：创建实例时传递 props。主要作用是方便测试。
- 限制： 只用于 new 创建的实例中。
var Comp = Vue.extend({
props : ["message"],
template : "{{message}}"
});
var app2 = new Comp({
el : "#app2",
propsData : {
message : "mmmm"
}
});
4) computed
- 类型：{ [key: string]: Function | { get: Function, set: Function } }
- 详细：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
- 限制：切勿使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
- 示例：
var vm = new Vue({
data : {a:1},
computed : {
aDouble : function() {
return this.a*2;
},
aPlus : {
get : function(){
return this.a + 1;
},
set : function(v){
this.a = v- 1;
}
}
}
});
console.log(vm.aDouble); //2
console.log(vm.aPlus); //2
console.log(vm.a); //1
vm.aPlus = 3;
console.log(vm.a); //2
5) methods
- 类型：{ [key: string]: Function }
- 详细：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
- 示例：
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus();
vm.a // 2
6) watch
- 类型：{ [key: string]: string | Function | Object }
- 详细：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
- 示例：
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2； //new: 2, old: 1
2.DOM
1）el
类型：string | HTMLElement
限制：只在由 new 创建的实例中遵守
-
详情：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。
如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。
2）template
类型：string
-
详细：
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot。如果值以 # 开始，则它用作选项符，将使用匹配元素的 innerHTML 作为模板。常用的技巧是用