vue構造器以及實例屬性

一、構造器

1、vue.js就是一個構造器，通過構造器Vue來實例化一個對象；例如：var vm = new Vue({});

2、實例化Vue時，需要傳入一個參數（選項對象）；

3、參數：選項對象可以包含，數據(data)、掛載元素(el)、方法(methods)、模版(template)、生命周期函數等等；

4、擴展構造器Vue，從而用預定義選項創建可復用的組件構造器，所有組件都是被擴展的Vue的實例，使用Vue.extend({})來擴展；

　　注意：盡管可以命令式地創建擴展實例，不過在多數情況下建議將組件構造器注冊為一個自定義元素，然后聲明式地用在模板中。

二、屬性與方法

1、每個Vue的實例都會代理其data對象里的所有屬性，被代理的屬性是響應的；

2、如果實例創建之后添加新的屬性到實例上，不會觸發視圖更新；

3、不要在實例屬性或者回調函數中（如 vm.$watch('a', newVal => this.myMethod())）使用箭頭函數。因為箭頭函數綁定父上下文，所以 this 不會像預想的一樣是 Vue 實例，而是 this.myMethod 未被定義。

4、Vue實例暴露了一些有用的實例屬性和方法，帶有前綴 $ ,便於與代理的data區分

　　a、vm.$el：類型（HTMLElement）掛載元素，Vue實例的DOM根元素；

var vm = new Vue({
    el: "#app",
    data: {
        a: 'hello',
        b: 'hi'
    }
});
console.log(vm.$el === document.getElementById('app'));  // true

　　b、vm.$data：類型（Object），Vue實例觀察的數據對象

var data = { a: 'hello', b: 'hi' }
var vm = new Vue({
    el: "#app",
    data: data
});
console.log(vm.$data === data);  // true
console.log(vm.$data.a);  // 'hello'
console.log(vm.$data.b);  // 'hi'

　　c、vm.$props：類型（Object），不清楚怎么用，哭哭哭。。。求指教。。。

<div id="app">
    <child :bmsg="bmsg"></child>
    <child bmsg="hi"></child>
</div>
<script type="text/javascript">
var vc = Vue.component('child',{
    props:['bmsg'],
    template: '<h1>{{bmsg}}</h1>'
})
var vm = new Vue({
    el: "#app",
    data: {
        bmsg: 'hello'
    }
});
console.log(vc.$props);  //undefined
console.log(vm.$props);  //undefined

　　d、vm.$options：類型（Object），用於當前Vue實例的初始化選項，在選項中需要包含自定義屬性的時候很有用。

var vm = new Vue({
    el: '#app',
      customOption: 'foo',
      created: function () {
        console.log(this.$options.customOption) // 'foo'
      }
});
console.log(vm.$options); // Object {components: Object, directives: Object, filters: Object, el: "#app", customOption: "foo"…}
console.log(vm.$options.customOption); // 'foo'
console.log(vm.$options.el);  // '#app'

　　e、vm.$parent：類型（Vue實例），父實例。

　　f、vm.$root：類型（Vue實例），當前組件樹的根Vue實例，如果沒有父實例，就是實例本身。

　　h、vm.$children：類型（Array(Vue實例)），當前實例的直接子組件

　　　　需要注意 $children 並不保證順序，也不是響應式的。如果你發現自己正在嘗試使用 $children 來進行數據綁定，考慮使用一個數組配合 v-for 來生成子組件，並且使用 Array 作為真正的來源。

　　i、vm.$slots：類型（{ [name: string]: ?Array<VNode> }），用來訪問被 slot 分發的內容。每個具名 slot 有其相應的屬性（例如：slot="foo" 中的內容將會在 vm.$slots.foo 中被找到）。default 屬性包括了所有沒有被包含在具名 slot 中的節點。

　　j、vm.$scopedSlots：；

　　k、vm.$refs：類型（Object），一個對象，其中包含了所有擁有 ref 注冊的子組件；

　　l、vm.$isServer：類型（boolean），當前Vue實例是否運行於服務器；