摘要：父子組件通信父組件通過(guò)向下傳遞數(shù)據(jù)給子組件，子組件通過(guò)給父組件發(fā)送消息。是一個(gè)對(duì)象而不是字符串?dāng)?shù)組時(shí)，它包含驗(yàn)證要求。狀態(tài)管理由于多個(gè)狀態(tài)分散的跨越在許多組件和交互間，大型應(yīng)用的復(fù)雜度也隨之增長(zhǎng)。提供了，可以通過(guò)文檔學(xué)習(xí)。

vue是一個(gè)前端框架，主要兩個(gè)特點(diǎn)：數(shù)據(jù)綁定、組件化。

根據(jù)教程安裝環(huán)境：node.js、npm、webpack、vue-cli
主要的命令行：

# 保證已安裝node.js環(huán)境    全局安裝 vue-cli（vue的腳手架）
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴(lài)，走你
$ cd my-project
$ npm install
$ npm run dev

相關(guān)的幾個(gè)命令行：

# node版本
$ node -v
# 清緩存
$ npm cache clean -f
# 全局安裝鏡像
$ npm install -g nrm
# 可用的鏡像資源
$ nrm ls
# 選用taobao的鏡像（安裝鏡像之后，npm可以輸入cnpm代替）
$ nrm use taobao
# 安裝vue路由模塊和網(wǎng)絡(luò)請(qǐng)求模塊
$ cnpm install vue-router vue-resource --save
# 工程打包
$ npm run build

sublime text 中安裝Vue Syntax Highlight插件

一些小總結(jié)：

template 寫(xiě) html，script寫(xiě) js，style寫(xiě)樣式

一個(gè)template下只能有一個(gè)并列的 div

數(shù)據(jù)要寫(xiě)在return 里面,如:

組件是什么？
組件可以擴(kuò)展html元素，封裝可以重用的代碼。Vue.js的編譯器為它添加特殊功能。

使用組件

注冊(cè)全局組件，使用：Vue.component(tagName,options)：

    //注冊(cè)，對(duì)于自定義標(biāo)簽名稱(chēng)，不強(qiáng)制要求遵循W3C規(guī)則（小寫(xiě)，并且包含一個(gè)短杠），不過(guò)還是盡量遵循的比較好
    Vue.component("my-component",{
        template:"
A example component!
"
    })
    //使用
    

        
    
 
    //創(chuàng)建根實(shí)例，要確保初始化根實(shí)例之前注冊(cè)了組件
    new Vue({
        el:"#example"
    })

注冊(cè)局部組件，通過(guò)組件實(shí)例選項(xiàng)注冊(cè)，可以使組件盡在另一個(gè)實(shí)例/組件的作用域中可用：

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

這種封裝也適用于其他可注冊(cè)的Vue功能，如指令。

父組件通過(guò)props向下傳遞數(shù)據(jù)給子組件，子組件通過(guò)events給父組件發(fā)送消息。

props
組件實(shí)例的作用域是孤立的。子組件的模板內(nèi)不應(yīng)該直接引用父組件的數(shù)據(jù)，可以使用props把數(shù)據(jù)傳給子組件。

props是父組件用來(lái)傳遞數(shù)據(jù)的一個(gè)自定義的屬性。子組件需要顯式的用props選項(xiàng)聲明的“prop”

Vue.component("child",{
    //聲明props
    props:["myMessage"],//使用非字符串模板時(shí)，prop的名字形式會(huì)從camelCase轉(zhuǎn)為kebab-case
    template:"hello,{{message}}!"
})
//使用

//渲染
hello,jake!

動(dòng)態(tài)的props

可以用v-bind動(dòng)態(tài)綁定props的值到父組件的數(shù)據(jù)中，當(dāng)父組件的數(shù)據(jù)有變化時(shí)，子組件會(huì)隨之變化。

 
    
    //:my-message 是 v-bind:my-message的縮寫(xiě)
    
    

prop驗(yàn)證

組件可以為props指定驗(yàn)證要求。prop是一個(gè)對(duì)象而不是字符串?dāng)?shù)組時(shí)，它包含驗(yàn)證要求。

自定義事件

子組件傳遞數(shù)據(jù)給父組件，需要用到自定義事件：
使用 $on(eventName) 監(jiān)聽(tīng)事件
使用 $emit(eventName) 觸發(fā)事件

  
{{ total }}
  
  


Vue.component("button-counter",{
    template:"{{ counter }}",
    data:function () {
        return {
            counter:0
        }
    },
    methods:{
        increment: function(){
            this.counter +=1
            this.$emit("incrment")
        }
    }
})

new Vue({
    el:"#counter-event-example",
    data:{
        total:0
    },
    methods:{
        incrementTotal:function(){
            this.total +=1
        }
    }
})

簡(jiǎn)單場(chǎng)景下，使用一個(gè)用的Vue實(shí)例作為中央事件的總線(xiàn)。

var bus = new Vue()
//觸發(fā)組件A中的事件
bus.$emit("id-selected",1)
//在組件B創(chuàng)建的鉤子中監(jiān)聽(tīng)事件
bus.$on("id-selected",function(id){
    //...
})

復(fù)雜情況下，應(yīng)該考慮專(zhuān)門(mén)的狀態(tài)管理模式。

可復(fù)用的組件應(yīng)當(dāng)定義一個(gè)清晰的公開(kāi)接口，Vue組件的接口，來(lái)自三部分——props、events、slots：
props允許外部環(huán)境傳遞數(shù)據(jù)給組件。
events允許組件觸發(fā)外部環(huán)境的副作用。
slots允許外部環(huán)境將額外的內(nèi)容組合在組件中。

大多數(shù)的單頁(yè)面應(yīng)用，都推薦使用vue-router庫(kù)
簡(jiǎn)單的路由不需要引入整個(gè)路由庫(kù)。如：

const NotFound = { template: "
Page not found
" }
const Home = { template: "
home page
" }
const About = { template: "
about page
" }
const routes = {
  "/": Home,
  "/about": About
}
new Vue({
  el: "#app",
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

將 h 作為 createElement 的別名是 Vue 生態(tài)系統(tǒng)中的一個(gè)通用慣例，實(shí)際上也是 JSX 所要求的，如果在作用域中 h
失去作用， 在應(yīng)用中會(huì)觸發(fā)報(bào)錯(cuò)。

由于多個(gè)狀態(tài)分散的跨越在許多組件和交互間，大型應(yīng)用的復(fù)雜度也隨之增長(zhǎng)。采用簡(jiǎn)單的store模式：

var store = {
  debug: true,
  state: {
    message: "Hello!"
  },
  setMessageAction (newValue) {//變更記錄
    this.debug && console.log("setMessageAction triggered with", newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    this.debug && console.log("clearMessageAction triggered")
    this.state.message = "clearMessageAction triggered"
  }
}
//實(shí)例/組件仍然可以擁有和管理自己的私有狀態(tài)
var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }

組件不允許直接修改屬于 store 實(shí)例的 state，而應(yīng)執(zhí)行 action 來(lái)分發(fā) (dispatch) 事件通知 store 去改變，我們最終達(dá)成了 Flux 架構(gòu)。這樣約定的好處是，我們能夠記錄所有 store 中發(fā)生的 state 改變，同時(shí)實(shí)現(xiàn)能做到記錄變更 (mutation) 、保存狀態(tài)快照、歷史回滾/時(shí)光旅行的先進(jìn)的調(diào)試工具。Vue提供了vuex，可以通過(guò)文檔學(xué)習(xí)。

先看看我們什么時(shí)候需要它：

SEO 搜索引擎優(yōu)化

客戶(hù)端網(wǎng)絡(luò)慢

客戶(hù)端運(yùn)行在老的或者沒(méi)有javascript引擎上，Vue只能運(yùn)行在IE9+

服務(wù)端渲染來(lái)改善一個(gè)少數(shù)的營(yíng)銷(xiāo)頁(yè)面等的SEO,可以用預(yù)渲染替換?？梢杂?strong>prerender-spa-plugin插件來(lái)添加預(yù)渲染。