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

vue是一個前端框架，主要兩個特點：數(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)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

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

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

sublime text 中安裝Vue Syntax Highlight插件

一些小總結(jié)：

template 寫 html，script寫 js，style寫樣式

一個template下只能有一個并列的 div

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

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

使用組件

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

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

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

注冊局部組件，通過組件實例選項注冊，可以使組件盡在另一個實例/組件的作用域中可用：

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

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

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

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

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

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

//渲染
hello,jake!

動態(tài)的props

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

 
    
    //:my-message 是 v-bind:my-message的縮寫
    
    

prop驗證

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

自定義事件

子組件傳遞數(shù)據(jù)給父組件，需要用到自定義事件：
使用 $on(eventName) 監(jiān)聽事件
使用 $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
        }
    }
})

簡單場景下，使用一個用的Vue實例作為中央事件的總線。

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

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

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

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

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)中的一個通用慣例，實際上也是 JSX 所要求的，如果在作用域中 h
失去作用， 在應(yīng)用中會觸發(fā)報錯。

由于多個狀態(tài)分散的跨越在許多組件和交互間，大型應(yīng)用的復(fù)雜度也隨之增長。采用簡單的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"
  }
}
//實例/組件仍然可以擁有和管理自己的私有狀態(tài)
var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }

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

先看看我們什么時候需要它：

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

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

客戶端運行在老的或者沒有javascript引擎上，Vue只能運行在IE9+

服務(wù)端渲染來改善一個少數(shù)的營銷頁面等的SEO,可以用預(yù)渲染替換。可以用prerender-spa-plugin插件來添加預(yù)渲染。