「JavaScript」Vue.js + Webpack組件化開發入門

論如今前端最熱門的開發方式，那必然是組件化開發。而在組件化開發裏面最熱門的框架則是 Facebook 的 React 。可是 React 的學習成本比較高，若是對於中小型的項目，使用 Vue 或許是不錯的選擇。

MVVM

借用一下 Vue 官網的圖片， ViewModel 是鏈接 View 與 Model 兩層的媒介。

在 MVC 模式中， Controller 的功能主要是監聽 View 層的事件，例如用戶點擊、用戶提交輸入等操做，並根據 View 層不一樣的事件響應不一樣的操做。可能會從後端（Model）讀取/寫入數據，也有可能不與後端進行交互。

然後，Controller又會根據既定的業務流程，或根據 Model 返回的值來對 View 層進行更新。這樣的話咱們全部的邏輯基本上都集中在了Controller中。

---

ViewModel 將自身的數據與 View 層雙向綁定了起來，當 View 有變更的時候，會反映到 ViewModel 中，並觸發相應的處理函數，這些處理函數（無論是單純的數據處理或者從後端請求數據），會去更新 ViewModel 的數據，而 ViewModel 的數據變更會實時反映到 View 當中。

因此，無論是 View 仍是 Model 都讀寫的是 ViewModel 的數據，View 層的邏輯交給了 View 層，而數據處理的邏輯交給了 Model 層。ViewModel 算是在兩層之間提供了一個接口。

組件化

繼續借用一張 Vue 官網的圖片。在之前咱們開發的時候，若是想複用一個部分，例如表格，咱們會使用 JS 來生成HTML，而且根據給定的容器、數據、配置信息來生成 HTML 片斷，插入容器當中。以後得再引用表格相關的 CSS。

而 Vue 的組件包括模板（HTML）、邏輯（JS）、樣式（CSS）三部分。只要給這個組件相應的數據，這個組件即是一個完備的組件，各類該組件相關的事件處理，數據請求，UI更新都在組件中完成。

使用一個 Vue 組件也很是方便，除了申明之外，直接在 HTML 中引入自定義標籤，標籤名爲組件的名字，使用標籤屬性來給組件傳遞數據。

使用 Webpack 之後，Vue 每個組件能夠封裝在獨立的文件中，包括<template>、<script>、<style>三個標籤，描述了模板、邏輯、樣式。

<template>
    <div class="example">
        <h1>{{ title }}</h1>
        <h2>{{ c_title }}</h2>
    </div>
</template>

<script>
    module.exports = {
        props: ['title'],
        computed: {
            c_title: function() {
                return this.title + ' computed.';
            }
        }
    };
</script>

<style>
    .example {
        text-align: left;
    }
</style>

+Webpack

在 Webpack 中，咱們只須要使用 vue-loader 處理全部的 *.vue 文件便可，須要用到組件的時候，直接 require，並在components屬性裏面註冊便可使用。

不要忘了在入口函數中初始化 Vue

var Vue = require("vue");
var c1 = require("xxx/c1.vue");
var c2 = require("xxx/c2.vue");

new Vue({
        el: "#app",
        components: {
            "c1": c1,
            "c2": c2
        }
    });

---

點擊 _這裏_ 開始學習 Vue 吧！