這篇文章是同事Awe，vue插件小王子寫的言疗，現(xiàn)在轉(zhuǎn)過來晴圾，原文只有md，不知道網(wǎng)上鏈接噪奄。

前端開發(fā)的現(xiàn)狀

框架多不多

隨著互聯(lián)網(wǎng)設備的帶寬和硬件的發(fā)展死姚，web的應用的交互越來越重。

想開發(fā)的復雜交互的網(wǎng)站怎么辦勤篮？
沒關系都毒，一大波前端框架來拯救你。

這個是我找到的一張圖碰缔，是一些最近幾年出現(xiàn)的前端框架账劲。左上角的有Angular、Ember金抡、BackBone瀑焦、Knockout，還有今天即將安利的Vue梗肝；這里其他位置我認識的還有Meteor榛瓮，感覺它是非常未來的框架，實時的特性非常excited巫击，還有右上的Polymer禀晓、React精续。

怎么選擇前端框架

一臉懵逼

我只是想安靜地寫前端

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

其實作為一個安靜的前端匆绣，只是需要一個不需要太多時間成本來學習驻右，快速的上手開發(fā)業(yè)務，并使得項目的開發(fā)和用戶體驗有可見的提升（用戶給好評崎淳，老板很滿意堪夭，升值加薪，走上人生巔峰＜鸢肌）森爽。

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

Vue.js

Reactive Components for Modern Web Interfaces
數(shù)據(jù)驅(qū)動的組件，為現(xiàn)代化的 Web 界面而生
最新版本是 2.0 23k star

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

Vue.js 主要是干啥的嚣镜？

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

數(shù)據(jù)驅(qū)動付呕？

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

Vue.js 怎么實現(xiàn)的？

Vue.js 的核心是一個響應的數(shù)據(jù)綁定系統(tǒng)抄瓦，它讓數(shù)據(jù)與 DOM 保持同步非常簡單潮瓶。在使用 jQuery 手工操作 DOM 時，我們的代碼常常是命令式的钙姊、重復的與易錯的毯辅。Vue.js 擁抱數(shù)據(jù)驅(qū)動的視圖概念。通俗地講煞额，它意味著我們在普通 HTML 模板中使用特殊的語法將 DOM “綁定”到底層數(shù)據(jù)悉罕。一旦創(chuàng)建了綁定，DOM 將與數(shù)據(jù)保持同步立镶。每當修改了數(shù)據(jù)，DOM 便相應地更新类早。這樣我們應用中的邏輯就幾乎都是直接修改數(shù)據(jù)了媚媒，不必與 DOM 更新攪在一起。這讓我們的代碼更容易撰寫涩僻、理解與維護缭召。

為什么要用Vue.js

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

那些公司在用Vue.js

Google，F(xiàn)acebook嵌巷，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，它也有幾個模板和模板內(nèi)的配置選項痴奏，可快速搭適合建你的應用開發(fā)環(huán)境蛀骇。

使用 Props 傳遞數(shù)據(jù)

<!-- 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>

組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)读拆∩勉荆可以使用 props 把數(shù)據(jù)傳給子組件。
“prop” 是組件數(shù)據(jù)的一個字段檐晕，期望從父組件傳下來暑诸。子組件需要顯式地用 props 選項，props的聲明可以是簡單的數(shù)組方式，也可以是對象方式嵌洼，可以包含類型驗證和默認值坯墨。

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 在它的組件系統(tǒng)中實現(xiàn)了一個用于組件樹中通信的自定義事件的接口西采，任何一Vue實例都是一個事件節(jié)點，我們可以使用$emit在它上面觸發(fā)事件继控，和DOM事件類似械馆，Vue的事件是冒泡向上傳遞胖眷，不過不同的是，會在第一次觸發(fā)回調(diào)之后就停止冒泡霹崎，當然你也可以在回調(diào)中 return true 就會繼續(xù)向上傳遞珊搀。

使用 Slot 分發(fā)內(nèi)容

<!-- 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>
        如果沒有分發(fā)內(nèi)容則顯示我。
      </slot>
    </div>
</template>

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

slot 是Vue.js 的內(nèi)容分發(fā) API尾菇，參照了當前 Web 組件規(guī)范草稿境析，使用特殊的 <slot> 元素作為原始內(nèi)容的插槽

編譯作用域

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

這里的 msg 就是在父組件的作用域內(nèi)的數(shù)據(jù)
父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯

具名 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 通過匹配他們就能準確的把內(nèi)容分發(fā)到指定位置憔儿，對于父組件中沒有指定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 選項時谒臼，模板的內(nèi)容將替換實例的掛載元素。因而推薦模板的頂級元素始終是單個元素耀里。

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

• 模板包含多個頂級元素蜈缤。
• 模板只包含普通文本。
• 模板只包含其它組件（其它組件可能是一個片段實例）冯挎。
• 模板只包含一個元素指令底哥，如 <partial> 或 vue-router 的 <router-view>。
• 模板根節(jié)點有一個流程控制指令房官，如 v-if 或 v-for趾徽。

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

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

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

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

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

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

goodbye.once
goodbye.sync

在即將發(fā)布的 Vuejs 2.0中 .once, .sync 修飾符已經(jīng)確認被廢棄
props 會變?yōu)閱蜗蚪壎ɡ澹咏M件不能直接操作父組件的數(shù)據(jù)屬性了袁，應當使用事件$emit 來進行組件間數(shù)據(jù)的通信

總結

以上講了一些基礎的Vue組件的功能，使用Vue開發(fā)SPA還的有重要的路由Vue-router和Flux的Vue實現(xiàn)Vuex湿颅，在實際開發(fā)中還需要了解Vue的指令载绿、過濾器、生命周期等油航，結合Vue的文檔也能很好理解卢鹦，也推薦在github 通過 vue-awesome看一寫優(yōu)秀的第三方組件和插件的代碼，相信能增長不少Vue開發(fā)的經(jīng)驗。

More

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