各位同學，大家晚上好，我是Awe，大學退學，目前在北京從事前端的工作，因為之前入門前端就開始使用Vuejs，算有一些爬坑經歷。受豪情大大委托，花大家一點時間和大家聊聊我使用Vuejs的經歷，主要內容就是講講Vuejs組件化相關的一些點；因為我能力有限，可能會有理解不到位的地方，希望群里大神指正，一起交流。

前端開發的現狀

隨著互聯網設備的帶寬和硬件的發展，web的應用的交互越來越重。

想開發的復雜交互的網站怎么辦？
沒關系，一大波前端框架來拯救你。

這個是我找到的一張圖，是一些最近幾年出現的前端框架。左上角的有Angular、Ember、BackBone、Knockout，還有今天即將安利的Vue；這里其他位置我認識的還有Meteor，感覺它是非常未來的框架，實時的特性非常excited，還有右上的Polymer、React。

怎么選擇前端框架

我只是想安靜地寫前端

作為一個選擇恐懼癥，面臨這么多選擇的時候是很苦惱的

其實作為一個安靜的前端，只是需要一個不需要太多時間成本來學習，快速的上手開發業務，并使得項目的開發和用戶體驗有可見的提升（用戶給好評，老板很滿意，升值加薪，走上人生巔峰！）。

那么我們就進入正題安利 Vue.js

Vue.js

Reactive Components for Modern Web Interfaces
數據驅動的組件，為現代化的 Web 界面而生
最新版本是 2.0 23k star

尤小右 Evan You
@youyuxi
多說 / Google / Meteor
發布于 2014 年 2 月

Vue.js 主要是干啥的？

它是一個 MVVM 前端框架
Model / View / ViewModel
我們不需要撰寫任何 DOM 操作代碼：被綁定增強的 HTML 模板是底層數據狀態的聲明式的映射，數據不過是普通 JavaScript 對象。我們的視圖完全由數據驅動。

數據驅動？

演示這個例子： http://codepen.io/awee/pen/grjGbB

Vue.js 怎么實現的？

Vue.js 的核心是一個響應的數據綁定系統，它讓數據與 DOM 保持同步非常簡單。在使用 jQuery 手工操作 DOM 時，我們的代碼常常是命令式的、重復的與易錯的。Vue.js 擁抱數據驅動的視圖概念。通俗地講，它意味著我們在普通 HTML 模板中使用特殊的語法將 DOM “綁定”到底層數據。一旦創建了綁定，DOM 將與數據保持同步。每當修改了數據，DOM 便相應地更新。這樣我們應用中的邏輯就幾乎都是直接修改數據了，不必與 DOM 更新攪在一起。這讓我們的代碼更容易撰寫、理解與維護。

為什么要用Vue.js

• 清晰簡單的API讓業務代碼更好的組織
• 解決了前端交互復雜而帶來的性能問題
• 健全、顏值高的官??檔
• 完整的開發生態鏈

那些公司在用Vue.js

Google，Facebook，Airbnb，
微博 小米 阿里巴巴，百度，餓了么，58

前端組件化？

前端組件化得核心思路就是將一個巨大復制的東西拆分成粒度合理的小東西。

使用Vue單文件組件

在典型的 Vue.js 項目中，我們會把界面拆分為多個小組件，每個組件在同一地方封裝它的 CSS 樣式，模板和 JavaScript 定義。
使用vue官方的vue-loader + webpack還可以給其中的style template 和 script使用各種預、后處理器來編譯，比如style可以使用sass、less、postcss等，在掘金 template是寫的jade，非常懷念寫jade(pug)的日子。至于 script 當然推薦是來寫 ES6（+7）。
這里不少功能涉及到webpack相關配置，不過vue有官方腳手架工具vue-cli，它也有幾個模板和模板內的配置選項，可快速搭適合建你的應用開發環境。

使用 Props 傳遞數據

<!-- parent.vue -->
<template>
    <div>
        <!-- 默認為單向綁定 -->
        <child :msg="parentMsg"></child>
    </div>
</template>
<script>
import child from './child'
export default {
    data () {
        return {
            parentMsg: 'some words'
        }
    },
    components: {
        child
    }
}
</script>

<!-- child.vue -->
<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
    export default {
        props: {
           msg: String
        }
    }
</script>

組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內直接引用父組件的數據。可以使用 props 把數據傳給子組件。
“prop” 是組件數據的一個字段，期望從父組件傳下來。子組件需要顯式地用 props 選項，props的聲明可以是簡單的數組方式，也可以是對象方式，可以包含類型驗證和默認值。

props: ['msg', 'otherMsg']

props: {
    msg: String,
    otherMsg: {
        type: String,
        default () {
            return 'it's default str'
        }
    }
}

使用 $emit 傳遞事件

<!-- parent.vue -->
<template>
    <div>
        <child @child-ready="handler"></child>
    </div>
</template>
<script>
import child from './child'
export default {
    components: {
        child
    },
    methods: {
        handler (msg) {
            console.log(msg)
        } 
    }
}
</script>

<!-- child.vue -->
<template>
    <div>
        it's child.vue
    </div>
</template>

<script>
    export default {
        ready () {
            this.sayReady()
        },
        methods: {
            sayReady () {
                this.$emit('child-ready', 'Hello!')
            }
        }
    }
</script>

我們先來看看這兩段代碼，這個兩個是一個簡單的父子組件的事件通信例子...

Vue 在它的組件系統中實現了一個用于組件樹中通信的自定義事件的接口，任何一Vue實例都是一個事件節點，我們可以使用$emit在它上面觸發事件，和DOM事件類似，Vue的事件是冒泡向上傳遞，不過不同的是，會在第一次觸發回調之后就停止冒泡，當然你也可以在回調中 return true 就會繼續向上傳遞。

使用 Slot 分發內容

<!-- parent.vue -->
<template>
    <div>
        <child>
          <p>This is some original content</p>
        </child>
    </div>
</template>
<script>
import child from './child'
export default {
    components: {
        child
    }
}
</script>

<!-- child.vue -->
<template>
    <div>
      <h1>This is my component!</h1>
      <slot>
        如果沒有分發內容則顯示我。
      </slot>
    </div>
</template>

<!-- 渲染結果 -->
<div>
    <div>
      <h1>This is my component!</h1>
      <p>This is some original content</p>
    </div>
</div>

slot 是Vue.js 的內容分發 API，參照了當前 Web 組件規范草稿，使用特殊的 <slot> 元素作為原始內容的插槽

編譯作用域

<child>
  <p>{{ msg }}<p>
</child>

這里的 msg 就是在父組件的作用域內的數據
父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯

具名 Slot
子組件：

<div>
  <slot name="one"></slot>
  <slot></slot>
  <slot name="two"></slot>
</div>

父組件模板：

<multi-insertion>
  <p slot="one">One</p>
  <p slot="two">Two</p>
  <p>Default A</p>
</multi-insertion>

渲染結果

<div>
  <p slot="one">One</p>
  <p>Default A</p>
  <p slot="two">Two</p>
</div>

單個 Slot應該很好理解，那我們來看看vue是如何處理多個slot插入的。我們可以看到在子組件的 slot 中多了 一個name的屬性，與它相對應的就是 父子間中DOM 的 slot屬性，Vue 通過匹配他們就能準確的把內容分發到指定位置，對于父組件中沒有指定name DOM，它就會被放置在子組件中匿名 slot 的位置。

注意事項

避免片段實例（Fragment Instance）

不這么寫模板：

<div>root node 1</div>
<div>root node 2</div>

推薦這么寫：

<div>
  I have a single root node!
  <div>node 1</div>
  <div>node 2</div>
</div>

因為在使用 template 選項時，模板的內容將替換實例的掛載元素。因而推薦模板的頂級元素始終是單個元素。

下面幾種情況會讓實例變成一個片斷實例：

• 模板包含多個頂級元素。
• 模板只包含普通文本。
• 模板只包含其它組件（其它組件可能是一個片段實例）。
• 模板只包含一個元素指令，如 <partial> 或 vue-router 的 <router-view>。
• 模板根節點有一個流程控制指令，如 v-if 或 v-for。

<!-- 不可以，因為沒有根元素 -->
<example v-show="ok" transition="fade"></example>

<!-- props 可以 -->
<example :prop="someData"></example>

<!-- 流程控制可以，但是不能有過渡 -->
<example v-if="ok"></example>

那么為什么說要避免片段實例呢？

• 無法通過 this.$el 獲取組件內的頂級節點
• 組件元素上的非流程控制指令，非 prop 特性和過渡將被忽略

避免使用prop 的.sync 父子組件間雙向綁定

goodbye.once
goodbye.sync

在即將發布的 Vuejs 2.0中 .once, .sync 修飾符已經確認被廢棄
props 會變為單向綁定，子組件不能直接操作父組件的數據屬性，應當使用事件$emit 來進行組件間數據的通信

總結

以上講了一些基礎的Vue組件的功能，使用Vue開發SPA還的有重要的路由Vue-router和Flux的Vue實現Vuex，在實際開發中還需要了解Vue的指令、過濾器、生命周期等，結合Vue的文檔也能很好理解，也推薦在github 通過 vue-awesome看一寫優秀的第三方組件和插件的代碼，相信能增長不少Vue開發的經驗。

More

官網：http://vuejs.org/
論壇：http://forum.vuejs.org/
資源：https://github.com/vuejs/awesome-vue