前面囉嗦了一堆兒，補了點知識。

再來學Vue和webpack。

webpack是一款模組載入器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模組來使用和處理。

對初學者來說，真的有些亂，讀完這些，概念差不多了，實際應用的時候再做進一步學習吧。

接下來可以進行vuejs的學習了。

Vue.js是一套構建使用者介面的 漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，並且非常容易學習，非常容易與其它庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單檔案元件和Vue生態系統支援的庫

Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件

 作者本人的介紹，不得不說，比官網寫的易懂多了，

總結：

1、簡化並且優化效能的MVVM框架（相對於angular，去掉了controller，service。factory，scope，module等概念，都是viewModel）

<!-- 模板 -->
<div id="app">
    {{msg}}
</div>

// 原生物件即資料
var data = {
    msg: 'hello!'
}
// 建立一個 ViewModel 例項
var vm = new Vue({
    // 選擇目標元素
    el: '#app',
    // 提供初始資料
    data: data
})

2、元件化概念

Vue.component('my-component', {
    // 模板
    template: '<div>{{msg}} {{privateMsg}}</div>',
    // 接受引數
    props: {
        msg: String<br>    

    },
    // 私有資料，需要在函式中返回以避免多個例項共享一個物件
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})

註冊之後即可在父元件模板中以自定義元素的形式呼叫一個子元件： 

<my-component msg="hello"></my-component>

Vue.js的元件可以理解為預先定義好了行為的ViewModel類。一個元件可以預定義很多選項，但最核心的是以下幾個：

• 模板（template）：模板聲明瞭資料和最終展現給使用者的DOM之間的對映關係。
• 初始資料（data）：一個元件的初始資料狀態。對於可複用的元件來說，這通常是私有的狀態。
• 接受的外部引數(props)：元件之間通過引數來進行資料的傳遞和共享。引數預設是單向繫結（由上至下），但也可以顯式地宣告為雙向繫結。
• 方法（methods）：對資料的改動操作一般都在元件的方法內進行。可以通過v-on指令將使用者輸入事件和元件方法進行繫結。
• 生命週期鉤子函式（lifecycle hooks）：一個元件會觸發多個生命週期鉤子函式，比如created，attached，destroyed等等。在這些鉤子函式中，我們可以封裝一些自定義的邏輯。和傳統的MVC相比，可以理解為 Controller的邏輯被分散到了這些鉤子函式中。
• 私有資源（assets）：Vue.js當中將使用者自定義的指令、過濾器、元件等統稱為資源。由於全域性註冊資源容易導致命名衝突，一個元件可以宣告自己的私有資源。私有資源只有該元件和它的子元件可以呼叫。

基於構建工具的單檔案元件格式

Vue.js的核心庫只提供基本的API，本身在如何組織應用的檔案結構上並不做太多約束。但在構建大型應用時，推薦使用Webpack+vue-loader這個組合以使針對元件的開發更高效。

【參考連結】

休息一會兒，然後找個簡單的例子開搞吧。