「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 吧！