摘要：之對基礎(chǔ)理解構(gòu)造器是一個(gè)構(gòu)造函數(shù)，編程中稱之為構(gòu)造器每一個(gè)都是一個(gè)構(gòu)造函數(shù)的實(shí)例，這個(gè)過程叫做實(shí)例化構(gòu)造函數(shù)需要將其實(shí)例化后才會(huì)啟用構(gòu)造器要求實(shí)例化時(shí)需要傳入一個(gè)選項(xiàng)對象組件其實(shí)都是被擴(kuò)展的實(shí)例。

Vue構(gòu)造器

1 . Vue.js是一個(gè)構(gòu)造函數(shù)，編程中稱之為構(gòu)造器

2 . 每一個(gè)new Vue() 都是一個(gè)Vue構(gòu)造函數(shù)的實(shí)例，這個(gè)過程叫做實(shí)例化

3 . 構(gòu)造函數(shù)需要將其實(shí)例化后才會(huì)啟用 var vm = new Vue({ //...})

4 . Vue構(gòu)造器要求實(shí)例化時(shí)需要傳入一個(gè)選項(xiàng)對象

    

        {{msg}}

如：{{msg}}

1）{{msg}}會(huì)在視圖中顯示
2）{{msg}}在實(shí)例化后仍然保持?jǐn)?shù)據(jù)響應(yīng)
3）{{msg}}盡管在console.log(data)中存在，但視圖卻找不到，且會(huì)報(bào)錯(cuò)
4）因此請不要試圖在實(shí)例化后添加任何屬性
實(shí)例屬性 方法以及生命周期

1 . data會(huì)代理其對象里的所有屬性.

2 . 只有data里的屬性是響應(yīng)式的，即通信是雙向的.

3 . Vue被實(shí)例化后，再創(chuàng)建的屬性，將不會(huì)觸發(fā)視圖更新.

4 . 在文檔中經(jīng)常會(huì)使用 vm 這個(gè)變量名表示 Vue 實(shí)例，在實(shí)例化 Vue時(shí)，需要傳入一個(gè)選項(xiàng)對象，它可以包含數(shù)據(jù)(data)、模板(template)、掛載元素(el)、方法(methods)、生命周期鉤子(lifecyclehook)等選項(xiàng)。

1 . 每個(gè)Vue實(shí)例都會(huì)代理其data對象里所有的屬性：

2 . Vue實(shí)例暴露了一些有用的實(shí)例屬性與方法

var data = { a : 1 }
var vm = new Vue({
      data : data
})
    vm.a === data.a // -> true
    // 設(shè)置屬性也會(huì)影響到原始數(shù)據(jù)
    vm.a = 2
    data.a // -> 2
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3

1 . 為與代理屬性區(qū)分，方前添加了前綴$

2 . app.$data===data //->true

app.$el===document.getElementById("app") //->true

var data = { a : 1 }
var vm = new Vue({
      el : "#example" ,
      data : data
    })
    vm.$data === data // -> true
    vm.$el === document .getElementById( "example" ) // -> true
    // $watch 是一個(gè)實(shí)例方法
    vm.$watch( "a" , function ( newVal, oldVal ) {
      // 這個(gè)回調(diào)將在`vm.a` 改變后調(diào)用
})

created（創(chuàng)建后）mounted（載入后）updated（更新后）d（銷毀后） estroyed（銷毀后）

{{}}數(shù)據(jù)綁定最常見的就是Mustache（雙括號）的文本插值，使用v-once指令，可以執(zhí)行一次插值，后面如果有改變，將不會(huì)更新。

{{message}}

還可以插入HTML使用指令v-html
Mustache{{}} 不能在 HTML 屬性中使用，應(yīng)使用 v-bind 指令

    

        
這里的數(shù)據(jù)只會(huì)執(zhí)行一次更新：{{me    ssage}}
        
自定義html
    

var app2 = new Vue({
    el:"#app-2",
    data:{
        message:"第一次更新",
        rawHtml:"
這里是自定義html
這里是自定義html
"
    }
})
app2.message = "第二次更新沒有賦值";

v-if、v-on、v-bind
指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的值預(yù)期是單一 JavaScript 表達(dá)式（除了 v-for，之后再討論）。指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時(shí)相應(yīng)地將某些行為應(yīng)用到 DOM 上。

{{ message | capitalize }}

new Vue({
 // 將message的值首字母變?yōu)榇髮?，其它不? filters: {
 capitalize: function (value) {
 if (!value) return ""
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
 }
 }
})

    

        {{fullName}}
        
        

　　　　計(jì)算屬性基于自己的依賴進(jìn)行緩存，只要message沒發(fā)生變化，多次訪問該計(jì)算屬性就會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)；
　　　　而method調(diào)用總會(huì)執(zhí)行該函數(shù)。

　　　　都是用來處理某些數(shù)據(jù)隨其他數(shù)據(jù)的變動(dòng)而變動(dòng)的，但盡量不要濫用watch，如果代碼是命令式和重復(fù)的，先考慮下計(jì)算屬性computed，可使代碼更簡潔。

    {{msg}}