摘要：狀態(tài)管理構(gòu)建工具全局安裝的，全局安裝之后，就可以用命令創(chuàng)建一個(gè)新的項(xiàng)目，下面簡(jiǎn)單介紹一下基本的模板和語(yǔ)法這樣在頁(yè)面中顯示然后，中基本的指令屬性，指令前都帶有前綴，以表示提供的特殊屬性，渲染在上的特殊響應(yīng)式行為。

Vue是一款前端開(kāi)發(fā)框架，現(xiàn)在的框架本身是幫我們把一些重復(fù)的經(jīng)過(guò)驗(yàn)證的模式，抽象到一個(gè)設(shè)計(jì)好的封裝的API中，幫我們?nèi)?yīng)對(duì)這些復(fù)雜的問(wèn)題。
但是，框架自身也會(huì)有復(fù)雜度，這里就抽象出一個(gè)問(wèn)題，就是要做的應(yīng)用的復(fù)雜度與所使用的框架的復(fù)雜度的對(duì)比。 進(jìn)一步說(shuō)，是所要解決的問(wèn)題的內(nèi)在復(fù)雜度，與所使用的工具的復(fù)雜度進(jìn)行對(duì)比。
怎么看待前端框架的復(fù)雜度呢,現(xiàn)在的前端開(kāi)發(fā)已經(jīng)越來(lái)越工程化，可以根據(jù)下面對(duì)的圖片分析

我們?cè)谌魏吻闆r下都需要響應(yīng)式的渲染功能，并盡可能希望進(jìn)行可變的命令式操作，盡可能讓DOM的更新操作是自動(dòng)的，狀態(tài)變化的時(shí)候它就應(yīng)該自動(dòng)更新到正確的狀態(tài)；我們需要組件系統(tǒng)，將一個(gè)大型的界面切分成一個(gè)一個(gè)更小得可控單元客戶端路由--這是針對(duì)單頁(yè)應(yīng)用而言，不做就不需要，如果需要做單頁(yè)應(yīng)用，那么就需要有一個(gè)URL對(duì)應(yīng)到一個(gè)應(yīng)用的狀態(tài)，那就需要有路由解決方案，大規(guī)模的狀態(tài)管理————當(dāng)應(yīng)用簡(jiǎn)單的時(shí)候，可能一個(gè)很基礎(chǔ)的狀態(tài)和界面映射可以解決問(wèn)題，但是當(dāng)應(yīng)用變得很大，恩，very large 。設(shè)計(jì)多人協(xié)作的時(shí)候
，就會(huì)涉及多個(gè)組件之間的共享，多個(gè)組件需要去改動(dòng)同一份狀態(tài)，以及如何使得這樣大規(guī)模應(yīng)用依然能夠高效運(yùn)行，這就涉及大規(guī)模狀態(tài)管理的問(wèn)題，當(dāng)然也涉及到可維護(hù)性，還有構(gòu)建工具，現(xiàn)在，如果放眼前端的未來(lái)，當(dāng)HTTP2普及后，可能會(huì)帶來(lái)構(gòu)建工具的一次革命，但就目前而言，尤其是在中國(guó)的網(wǎng)絡(luò)環(huán)境下，打包和工程構(gòu)建依然是非常重要且不可避免的一個(gè)環(huán)節(jié)。
Vue非常專注的只做狀態(tài)到界面映射，以及組件。
Vue的特點(diǎn)是有自己的配套工具，核心雖然只解決一個(gè)很小的問(wèn)題。但它有生態(tài)圈及配套的可選工具，當(dāng)把它們一個(gè)一個(gè)加進(jìn)來(lái)，就可以組成非常強(qiáng)大的棧。就可以涵蓋其他的這些更完整的框架所涵蓋的問(wèn)題。

（1）聲明式渲染
現(xiàn)在基本所有的框架都已經(jīng)認(rèn)同這個(gè)看法————DOM應(yīng)盡可能是一個(gè)函數(shù)式到狀態(tài)的映射，狀態(tài)即是唯一的真相，而DOM狀態(tài)只是數(shù)據(jù)狀態(tài)的一個(gè)映射。所有的邏輯盡可能在狀態(tài)的層面去進(jìn)行。當(dāng)狀態(tài)改變的時(shí)候。View應(yīng)該是在框架幫助下自動(dòng)更新到合理的狀態(tài)。而不是說(shuō)當(dāng)你觀測(cè)到數(shù)據(jù)變化之后手動(dòng)選擇一個(gè)元素，再命令式去改動(dòng)它的屬性。在Vue2.0中，渲染層的實(shí)現(xiàn)做了根本性的改動(dòng)，就是引入了虛擬DOM。Vue的編譯器在編模板之后。會(huì)把這些模板編譯成一個(gè)渲染函數(shù)，而函數(shù)被調(diào)用的時(shí)候就會(huì)渲染并且返回一個(gè)虛擬DOM的樹(shù)，這個(gè)樹(shù)非常輕量，它負(fù)責(zé)描述當(dāng)前界面所應(yīng)處的狀態(tài)，當(dāng)我們有了這個(gè)虛擬的樹(shù)之后，再交給一個(gè)patch函數(shù)，負(fù)責(zé)把這些虛擬DOM真正施加到真實(shí)的DOM上。在這個(gè)過(guò)程中，Vue有自身的響應(yīng)式系統(tǒng)來(lái)偵測(cè)在渲染過(guò)程中所依賴到的數(shù)據(jù)來(lái)源 。在渲染過(guò)程中，偵測(cè)到數(shù)據(jù)來(lái)源時(shí)候，之后就可以精確感知數(shù)據(jù)源的變動(dòng)，到時(shí)候就可以根據(jù)需要重新進(jìn)行渲染，當(dāng)重新進(jìn)行渲染后，會(huì)生成一個(gè)新的樹(shù)，將新樹(shù)與舊樹(shù)進(jìn)行對(duì)比，就可以最終得出應(yīng)施加到 真實(shí)DOM上的改動(dòng)，最后再通過(guò)patch函數(shù)施加改動(dòng)。
(2)組件系統(tǒng)
在Vue中，父子組件之間的通信是通過(guò)Props傳遞。從父向子單向傳遞；而如果子組件想要在父組件作用里面產(chǎn)生副作用，就需要去派發(fā)事件。這樣就形成一個(gè)基本的父子通信模式，在涉及大規(guī)模狀態(tài)管理的時(shí)候會(huì)有額外的方案。Vue的組件引入構(gòu)建工具之后有一個(gè)單文件組件概念。
（3）客戶端路由
在做一個(gè)界面復(fù)雜度非常的高應(yīng)用時(shí)，會(huì)有很多的狀態(tài)，這樣的應(yīng)用顯然不可能在每做一次操作后都刷新一個(gè)頁(yè)面作為用戶反饋，這就要這個(gè)用用有多個(gè)復(fù)雜的狀態(tài)，同樣這些狀態(tài)還要對(duì)應(yīng)到URL。有一個(gè)重要的功能叫做deep-linking，也就是當(dāng)用戶瀏覽到一個(gè)URL ，把它穿給另外的人或者復(fù)制重新打開(kāi)，應(yīng)用需要直接渲染出這個(gè)URL對(duì)應(yīng)的狀態(tài)。這就意味著應(yīng)用的url和組件樹(shù)的狀態(tài)之間有一個(gè)映射關(guān)系，客戶端路由的職責(zé)就是讓這個(gè)映射關(guān)系聲明式地對(duì)應(yīng)起來(lái)。
（4）狀態(tài)管理

(5)構(gòu)建工具
全局安裝的vue-cli ，全局安裝之后，就可以用Vue命令創(chuàng)建一個(gè)新的項(xiàng)目，

npm install -g vue-cli 
vue init webpack-simple my-app
cd my-app
npm my-app
npm install    #or yarn
npm run dev

下面簡(jiǎn)單介紹一下vue基本的模板和語(yǔ)法

  {{ message }}

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!"
  }
})

這樣在頁(yè)面中顯示

Hello Vue！

然后，vue中基本的指令屬性v-bind，指令前都帶有前綴v-，以表示Vue提供的特殊屬性，渲染在DOM上的特殊響應(yīng)式行為。這里v-bind的作用是，將這個(gè)元素節(jié)點(diǎn)的title屬性和Vue實(shí)例的message屬性保持一致

示例：

  
    鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息！
  

var app2 = new Vue({
  el: "#app-2",
  data: {
    message: "頁(yè)面加載于 " + new Date().toLocaleString()
  }
})

再次打開(kāi)瀏覽器的javascript控制臺(tái)的輸入app2.message="新消息",就會(huì)再一次看到這個(gè)綁定的title屬性的HTML已經(jīng)發(fā)生了更新。

控制切換一個(gè)元素的顯示也相當(dāng)簡(jiǎn)單:

  
現(xiàn)在你看到我了

var app3 = new Vue({
  el: "#app-3",
  data: {
    seen: true
  }
})

現(xiàn)在你看到我了
繼續(xù)在控制臺(tái)設(shè)置app3.seen=false,會(huì)發(fā)現(xiàn)消息消失了
說(shuō)明既可以綁定DOM文本到數(shù)據(jù)，也可以綁定DOM結(jié)構(gòu)到數(shù)據(jù)，而且Vue也提供一個(gè)強(qiáng)大的過(guò)渡效果系統(tǒng)。也可以在Vue插入/更新/刪除元素時(shí)自動(dòng)應(yīng)用過(guò)度效果。
還有其他很多指令，每個(gè)都有特殊的功能。例如，v-for指令可以綁定數(shù)組的數(shù)據(jù)來(lái)渲染一個(gè)項(xiàng)目列表：

  

    

      {{ todo.text }}
    
  

var app4 = new Vue({
  el: "#app-4",
  data: {
    todos: [
      { text: "學(xué)習(xí) JavaScript" },
      { text: "學(xué)習(xí) Vue" },
      { text: "整個(gè)牛項(xiàng)目" }
    ]
  }
})

在控制臺(tái)里，輸入app4.todos.push({text:"新項(xiàng)目"}),列表中添加一個(gè)新項(xiàng)

為了讓用戶和應(yīng)用進(jìn)行互動(dòng)，可以用v-on指令綁定一個(gè)事件監(jiān)聽(tīng)器，通過(guò)它調(diào)用我們Vue實(shí)例中定義方法：

  
{{ message }}
  逆轉(zhuǎn)消息

var app5 = new Vue({
  el: "#app-5",
  data: {
    message: "Hello Vue.js!"
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split("").reverse().join("")
    }
  }
})

注意在 reverseMessage 方法中，我們更新了應(yīng)用的狀態(tài)，但沒(méi)有觸碰 DOM——所有的 DOM 操作都由 Vue 來(lái)處理，你編寫(xiě)的代碼不需要關(guān)注底層邏輯。
Vue 還提供了 v-model 指令，它能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。

  
{{ message }}
  

var app6 = new Vue({
  el: "#app-6",
  data: {
    message: "Hello Vue!"
  }
})

Vue組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以表現(xiàn)為用 is 特性進(jìn)行了擴(kuò)展的原生 HTML 元素。
組件的使用可以為全局注冊(cè)和局部注冊(cè)。
要注冊(cè)一個(gè)全局組件，可以使用 Vue.component(tagName, options)。例如：

    Vue.component("my-component", {
      // 選項(xiàng)
    })

組件在注冊(cè)之后，便可以作為自定義元素 在一個(gè)實(shí)例的 模板中使用。注意確保在初始化根實(shí)例之前注冊(cè)組件：

// 注冊(cè)
Vue.component("my-component", {
  template: "
A custom component!
"
})
// 創(chuàng)建根實(shí)例
new Vue({
  el: "#example"
})

渲染為：

  
A custom component!

局部注冊(cè)，可以通過(guò)某個(gè)Vue實(shí)例或組件實(shí)例將其注冊(cè)僅在其作用域內(nèi)可用的組件

var Child = {
  template: "
A custom component!
"
}
new Vue({
  // ...
  components: {
    //  將只在父組件模板中可用
    "my-component": Child
  }
})

在vue實(shí)例（我們也叫作根組件）下可以新建子組件，子組件下還可以新建子組件，這樣層層嵌套，可以將其內(nèi)部的組件構(gòu)成一個(gè)系統(tǒng)可以成為組件樹(shù)，我們可以看一個(gè)實(shí)例：
首先，我們new 一個(gè) vue的實(shí)例，在里面自定義三個(gè)子組件：

        var vm = new Vue({
            el: "#app",//掛載DOM元素
            components: {
                AppHead,
                AppMain,
                AppSide
            }
        });

接著，我們?cè)趆tml頁(yè)面內(nèi)的掛載元素內(nèi)添加子組件

注意，在這里我們根據(jù)ES6的規(guī)范，駝峰式命名要轉(zhuǎn)成 ‘-’ 加小寫(xiě)字母 ，然后在script里面注冊(cè)一下我們剛剛添加的組件

       var AppHead = {
            template: `
`
        }
        var AppMain = {
            template: `
`,
            components:{
                AppMainUnit
            }
        }
          var AppSide = {
            template: `
`,
            components:{
                AppSideUnit
            }
        }

同時(shí)的，我們?cè)贏ppMain和AppSide 里面也自定義了下面的子組件，AppMainUnit和AppSideUnit。
同樣要分別在他們的父組件的前面注冊(cè)他們：

       var AppMainUnit={
            template:`
`
        }
        var AppMain = {
            template: `
`,
            components:{
                AppMainUnit
            }
        }
        var AppSideUnit={
            template: `
`,
        }
        var AppSide = {
            template: `
`,
            components:{
                AppSideUnit
            }
        }

這樣，最后的結(jié)果：

創(chuàng)建Vue實(shí)例的時(shí)候大多數(shù)選項(xiàng)都可以在組件中使用，但是data除外，讓我們來(lái)看一下實(shí)例：

var data = { counter: 0 }
Vue.component("simple-counter", {
  template: "{{ counter }}",
  // 技術(shù)上 data 的確是一個(gè)函數(shù)了，因此 Vue 不會(huì)警告，
  // 但是我們卻給每個(gè)組件實(shí)例返回了同一個(gè)對(duì)象的引用
  data: function () {
    return data
  }
})
new Vue({
  el: "#example-2"
})

由于這三個(gè)組件實(shí)例共享了同一個(gè)data對(duì)象，因此遞增一個(gè)counter會(huì)影響所有組件
所以，我們應(yīng)該返回一個(gè)對(duì)象里面存放數(shù)據(jù):

data: function () {
  return {
    counter: 0
  }
}

現(xiàn)在每個(gè)counter都會(huì)有自己內(nèi)部的狀態(tài)了

組件需配合使用，最常見(jiàn)的就是父子組件，一個(gè)組價(jià)A在它的模板中使用了組件B，那么A和B之間必然要發(fā)生通訊，父組件要把數(shù)據(jù)下發(fā)子組件嗎，子組件要告知父組件監(jiān)聽(tīng)其內(nèi)部發(fā)生的事件，通過(guò)一個(gè)良好定義的接口來(lái)盡可能將父子組件解耦也是很重要的。這保證了每個(gè)組件的代碼可以在相對(duì)隔離的環(huán)境中書(shū)寫(xiě)和理解，從而提高了其可維護(hù)性和復(fù)用性。父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件向上傳遞。父組件通過(guò) prop 給子組件下發(fā)數(shù)據(jù)，子組件通過(guò)事件給父組件發(fā)送消息。

使用prop傳送數(shù)據(jù)
在Vue組件實(shí)例作用域是孤立的，所有子組件不能直接訪問(wèn)父組件內(nèi)的數(shù)據(jù)，這樣我們就應(yīng)該通過(guò)prop從父組件向下傳遞數(shù)據(jù)。

Vue.component("child", {
  // 聲明 props
  props: ["message"],
  // 就像 data 一樣，prop 也可以在模板中使用
  // 同樣也可以在 vm 實(shí)例中通過(guò) this.message 來(lái)使用
  template: "{{ message }}"
})

傳入一個(gè)普通的字符串

或者說(shuō)，在父組件中的data中加數(shù)據(jù)

data:{
     mymessage:[1,2,2,3,4,5,6]
     },

在子組件prop中添加如下：

  props: ["message","myMessage"],

然后

template: "{{ message }}{{myMessage}}"

恩，這樣就可以通過(guò)V-bind動(dòng)態(tài)綁定的my-message屬性訪問(wèn)到父組件中的mymessage屬性了。
如果props傳回的數(shù)據(jù)是對(duì)象，我們還可以通過(guò)遍歷將里面的每一項(xiàng)列出。

 template:"
{{item}}
"

注意：遍歷的時(shí)候不要將v-for綁到根元素上，因?yàn)槟０甯啬J(rèn)只能有一個(gè)。

prop是單向綁定的，當(dāng)父組件的屬性發(fā)生變化時(shí)，會(huì)傳遞給子組件，而子組件的改變卻不會(huì)影響到父組件。這是為了防止子組件無(wú)意間修改了父組件的狀態(tài)，來(lái)避免應(yīng)用的數(shù)據(jù)流變得難以理解。
props的改變無(wú)非就是兩種情況

Prop 作為初始值傳入后，子組件想把它當(dāng)作局部數(shù)據(jù)來(lái)用；

Prop 作為原始數(shù)據(jù)傳入，由子組件處理成其它數(shù)據(jù)輸出。

先看第一種，這個(gè)時(shí)候，定義一個(gè)局部變量，用prop的值去初始化它

  props: ["initialCounter"],
     data: function () {
        return { counter: this.initialCounter }
     }

這樣就可以對(duì)counter進(jìn)行處理
第二種使用計(jì)算屬性對(duì)prop進(jìn)行處理輸出

props: ["size"],
  computed: {
    normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

注意在 JavaScript 中對(duì)象和數(shù)組是引用類型，指向同一個(gè)內(nèi)存空間，如果 prop 是一個(gè)對(duì)象或數(shù)組，在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)。

可以為組件的prop提供驗(yàn)證規(guī)則，要指定驗(yàn)證規(guī)則，需要用對(duì)象的形式來(lái)定義 prop，而不能用字符串?dāng)?shù)組：

Vue.component("example", {
  props: {
    // 基礎(chǔ)類型檢測(cè) (`null` 指允許任何類型)
    propA: Number,
    // 可能是多種類型
    propB: [String, Number],
    // 必傳且是字符串
    propC: {
      type: String,
      required: true
    },
    // 數(shù)值且有默認(rèn)值
    propD: {
      type: Number,
      default: 100
    },
    // 數(shù)組/對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
    propE: {
      type: Object,
      default: function () {
        return { message: "hello" }
      }
    },
    // 自定義驗(yàn)證函數(shù)
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type可以是下面的原生構(gòu)造器

String

Number

Boolean

Function

Object

Array

Symbol

當(dāng)驗(yàn)證失敗的時(shí)候，Vue就會(huì)發(fā)出警告，注意 prop 會(huì)在組件實(shí)例創(chuàng)建之前進(jìn)行校驗(yàn)，所以在 default 或 validator 函數(shù)里，諸如 data、computed 或 methods 等實(shí)例屬性還無(wú)法使用。