http://www.feima5.com

                                                                  【好运pk10app】vue全家桶有哪些-js教程

                                                                  推荐教程:VUE.JS教程

                                                                    Vue有著名的全家桶系列,包含了vue-routervuex vue-resource。再加上构建工具vue-clisass样式,就是一个完整的vue项目的核心构成。

                                                                  概括起来就是:

                                                                    1、项目构建工具

                                                                    2、路由

                                                                    3、状态管理

                                                                    4、http请求工具。

                                                                  下面单独介绍

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

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

                                                                  # 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖,走你$ cd my-project$ npm install$ npm run dev

                                                                  二、vue-router

                                                                    安装:npm installvue-router

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

                                                                  import Vue from'vue'import VueRouter from'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. ...mapGetters({

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

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

                                                                  )RateUserInfo: 'getRateUserInfo' // Rate用户信息

                                                                  })

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

                                                                  2、actions

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

                                                                  例如:

                                                                  const store = new Vuex.Store({  state: {    count: 0  },  mutations: {    increment (state) {      state.c(ount++    }  },  actions: {    increment (context) {      context.commit('increment')    }  }})

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

                                                                  郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

                                                                  上一篇:bootstrap为什么是12列-Bootstrap教程
                                                                  下一篇:没有了