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

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

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

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

(5)構(gòu)建工具
全局安裝的vue-cli ，全局安裝之后，就可以用Vue命令創(chuà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

下面簡單介紹一下vue基本的模板和語法

  {{ message }}

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

這樣在頁面中顯示

Hello Vue！

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

示例：

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

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

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

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

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

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

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

  

    

      {{ todo.text }}
    
  

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

在控制臺里，輸入app4.todos.push({text:"新項目"}),列表中添加一個新項

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

  
{{ 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)，但沒有觸碰 DOM——所有的 DOM 操作都由 Vue 來處理，你編寫的代碼不需要關(guān)注底層邏輯。
Vue 還提供了 v-model 指令，它能輕松實現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。

  
{{ message }}
  

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

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

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

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

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

渲染為：

  
A custom component!

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

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

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

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

接著，我們在html頁面內(nèi)的掛載元素內(nèi)添加子組件

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

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

同時的，我們在AppMain和AppSide 里面也自定義了下面的子組件，AppMainUnit和AppSideUnit。
同樣要分別在他們的父組件的前面注冊他們：

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

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

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

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

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

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

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

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

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

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

傳入一個普通的字符串

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

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

在子組件prop中添加如下：

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

然后

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

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

 template:"
{{item}}
"

注意：遍歷的時候不要將v-for綁到根元素上，因為模板根元素默認只能有一個。

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

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

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

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

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

這樣就可以對counter進行處理
第二種使用計算屬性對prop進行處理輸出

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

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

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

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

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

String

Number

Boolean

Function

Object

Array

Symbol

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