gulp + vueJs

本篇只会讲解 vue 部分，对gulp 不熟悉的朋友，敬请移步篇。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

尝试 Vue.js 先创建一个 .html 文件，然后通过如下方式引入 Vue：

1 2	<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

1 2	<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>

这里不得不提及的 MVVM 戳这里，数据驱动视图是vueJs最大的特点，让我们先创建本地数据模型，或者通过AJAX 解析后端数据。

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

1 2	<div id="cv"> </div>

var app = new Vue({
    el: '#cv',store,
    data: {
        data: {},
        message: ""
    }
})

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

实例已经创建成功，让我们来了解一下 vue 的生命周期吧，戳这里～

了解生命周期后，继续来完成本篇demo，创建一个 created

类型：Function

详细：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

created(){
    $.getJSON("data.json", '',
        (data, textStatus, jqXHR)=> {
            this.$store.commit('initData',data)
            console.log(this.$store)
        }
    );
},

由于本次数据模型（Model）在本地，所以我们采用$.getJSON 的方式来获得～
相信细心的你已经发现代码中出现了 store 词汇，what？这是个神马～
让我们来看看 vue 另一大利器，vuex，状态管理戳这里～
讲人话就是，我有一个仓库 Store，然后我还有把钥匙串儿 state 记录着仓库里所有房间，以及当前房间又形成钥匙圈子房间钥匙，需要按层级记录。。

const store = new Vuex.Store({
    state: {
        todos: {
            todos1 :{
                todos2 :{
                    todos3:{
                        text: "找到我了～"
                    }
                }
            }
    },
})
console.log(this.$store.state.todos.todos1.todos2.todos3.text)

然后升级里系统现在有了张密码卡，不用按层级记录，直接记录里每个房间的密码～

const store = new Vuex.Store({
    state: {
        todos: {
            todos1 :{
                todos2 :{
                    todos3:{
                        text: "找到我了～"
                    }
                }
            }
    },
    getters: {
      getData: state => state.todos.todos1.todos2.todos3.text
    },
})
console.log(this.$store.getters.getData)

这里要向大家浓重介绍我们仓库的大管家 mutations ,大管家手下可以有很多兵～

const mutations: {
    initData (state,data) {
        state.todos.todos1.todos2.todos3.text = data
    }
}

这里知道了 boos 给大管家招聘了一名 initData 的手下，专注于初始化text领域～
这时候来了一车货，需要放入 text 房间，大管家得知此需求，遂即派出了text领域专家 initData～

1	this.$store.commit('initData',data)

前方预警！！！！来了5车货，需要按顺序放入a,b,c,d,e仓库，这时出现了混乱，大管家派出了5名专家，由于没有告知必须按顺序放入指定仓库，导致顺序出现错误，任务失败～
这时候仓库又进行升级引入专家组组长 Action～职责开任务单依次通知专家按照顺序完成任务～

const actions = {
    Task_A ({ commit, rootState }, cb) {
        commit('a',data)
    }),
    Task_B ({ commit, rootState }, cb) {
        commit('b',data)
    }),
    Task_C ({ commit, rootState }, cb) {
        commit('c',data)
    }),
    Task_D ({ commit, rootState }, cb) {
        commit('d',data)
    }),
    ,Task_E ({ commit, rootState }, cb) {
        commit('e',data)
    })
}
this.$store.dispatch('Task_A').then(() => {
    this.$store.dispatch('Task_B').then(() => {
        this.$store.dispatch('Task_C').then(() => {
            this.$store.dispatch('Task_D').then(() => {
                this.$store.dispatch('Task_E').then(() => {
                })
            })
        })
    })
})

若仓库发展至连锁，亦可开启分店管理模式(Module)，这里 rootState 是总店所有数据，cb 回调，
至此数据已存入仓库～

接下来敲黑板～完成数据装入页面。

computed:{
    getData () {
        return this.$store.getters.getData
    }
},

这里需要介绍计算属性computed，当页面有复杂运算时可以交给他，特点是计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

有人说既然是 return this.$store.getters.getData，何不如下写在data里面～

1
2
3

data: {
     data: store.getters.getData
 },

这里就强调了更新，由于$.getJSON 的异步机制，实力挂载时仓库里 data 还未装入。

数据何时装入？这里vue 提供观察者 watch，一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

watch: {
     getData (val, oldVal) {
         this.data = val
     }
 }

观察到计算属性函数 getData 更新后，执行装入页面～

查看演示源码戳这里～