VUE是前端开发框架。诞生于2014年吧。

原始的前端开发框架需要工程师写html、写css、写javascript(js)。js是脚本语言，浏览器可以运行js来执行一些js支持的动作，例如点击反馈，下拉菜单、操作html的DOM元素之类。这样开放效率就很低了。

后来诞生了一些前端开发框架，VUE就是其中之一。目前在国内前端开发中，特别是手机app的h5页面的开发部分，被很多公司采用。

使用VUE开发的时候，不需要js直接操作html元素，只需要管理js的变量值，html会自动更新这些值。传统的html配合js能完成的功能，VUE都给出了实现方案，开发只写简单的html和js语句就可以实现。

VUE开发的工具一般是visio stdio code（vscode），稍微适应两天就可以熟练应用了。还是很强大的。

 

Vue全家桶介绍

 

Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org），vue-resource（https://github.com/pagekit/vue-resource）。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。

概括起来就是：、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。

下面单独介绍

前言：Vue两大核心思想：组件化和数据驱动。组件化：把整体拆分为各个可以复用的个体，数据驱动：通过数据变化直接影响bom展示，避免dom操作。

一、Vue-cli是快速构建这个单页应用的脚手架,

#全局安装vue-cli$npminstall--globalvue-cli#创建一个基于webpack模板的新项目$vueinitwebpackmy-project#安装依赖，走你$cdmy-project$npminstall$npmrundev

二、vue-router

安装：npminstallvue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

importVuefrom'vue'

importVueRouterfrom'vue-router'

Vue.use(VueRouter)

另外注意在使用中，可以利用vue的过渡属性来渲染出切换页面的效果。

三、vuex

vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。vuex主要由五部分组成：state action、mutation、getters、mudle组成。

使用流程是：组件中可以直接调用上面四个部分除了mudle，

1、state

类似vue对象的data,用来存放数据以及状态。存放的数据为响应式，如果数据改变，那么依赖数据的组件也会发生相应的改变。

获取state的两种方式例子：

1. store.getters['getRateUserInfo']

2. 2....mapGetters({

3.        UserInfo:'login/UserInfo',//用户信息

4.        menuList:'getMenuList',//approve运价审批

5.        RateUserInfo:'getRateUserInfo'//Rate用户信息

6.   })

7. 注意：可以通过mapState把全局的state和getters映射到当前组件的computed计算属性中。

8. 2、actions

9. Action通过 store.dispatch 方法触发：action支持异步调用（可以调用api），mutation只支持操作同步，并且action提交的是mutation，而不是直接变更状态。

10. 例如：

11. conststore=newVuex.Store({

12. state:{

13.    count:0

14. },

15. mutations:{

16.    increment(state){

17.      state.count++

18.    }

19. },

20. actions:{

21.    increment(context){

22.      context.commit('increment')

23.    }

24. }

25. })

26. Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用 context.commit 提交一个mutation，或者通过 context.state 和 context.getters 来获取state和getters。

实践中，我们会经常用到ES2015的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：

actions:{

 increment({commit}){

   commit('increment')

 }

}

 

3、mutation

每个mutation都有一个字符串的 事件类型(type) 和一个 回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数。

4、getters

Vuex允许我们在store中定义“getter”（可以认为是store的计算属性）。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

constgetters={

 getRateInitData:state=>state.rateInitData,

 getchooseRateObj:state=>state.chooseRateObj,

 getSearchRateParams:state=>state.searchRateParams,

 getSearchRateResult:state=>state.searchRateResult,

 getRateUserInfo:state=>state.RateUserInfo,

 getMenuList:state=>state.menuList,

 getRateQueryParams:state=>state.rateQueryParams,

 getRateQueryResult:state=>state.rateQueryResult,

 getCheckRateDetailParams:state=>state.checkRateDetailParams,

 getReferenceCondition:state=>state.referenceCondition,

 getWaitApprovalParams:state=>state.waitApprovalParams

}

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将store中的getter映射到局部计算属性：

 

四、axios

axios是一个http请求包，vue官网推荐使用axios进行http调用。

安装：

npminstallaxios--save

例子：

1. 发送一个GET请求

2. //通过给定的ID来发送请求

3. axios.get('/user?ID=12345')

4. .then(function(response){

5.    console.log(response);

6. })

7. .catch(function(err){

8.    console.log(err);

9. });

10. //以上请求也可以通过这种方式来发送

11. axios.get('/user',{

12. params:{

13.    ID:12345

14. }

15. })

16. .then(function(response){

17. console.log(response);

18. })

19. .catch(function(err){

20. console.log(err);

21. });

22. 2、发送一个POST请求

23. axios.post('/user',{

24. firstName:'Fred',

25. lastName:'Flintstone'

26. })

27. .then(function(res){

28. console.log(res);

29. })

30. .catch(function(err){

31. console.log(err);

32. });

33. 具体参考：https://www.jianshu.com/p/df464b26ae58

 

vue就是一个js库，并且无依赖别的js库，跟jquery差不多。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。