爱站屋博客 - 好东西不私藏,大家一起分享!关于博客 留言板

网站首页 模板插件 正文

vu来吧兄弟干杯e全家桶有哪些

2019-08-03 模板插件 1328 ℃
vu来吧兄弟干杯e全家桶有哪些-第1张图片-【秒速时时彩开奖结果】爱站屋博客

[db:标签]荐教程: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.count++     }   },   actions: {     increment (context) {       context.commit('increment')     }   } })

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

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

3、mutation

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

4、getters

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

const getters = {   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调用。

安装:

npm install axios --save

例子:

1.发送一个GET请求

//通过给定的ID来发送请求 axios.get('/user?ID=12345')   .then(function(response){     console.log(response);   })   .catch(function(err){     console.log(err);   }); //以上请求也可以通过这种方式来发送 axios.get('/user',{   params:{     ID:12345   } }) .then(function(response){   console.log(response); }) .catch(function(err){   console.log(err); }); 2、发送一个POST请求 axios.post('/user',{   firstName:'Fred',   lastName:'Flintstone' }) .then(function(res){   console.log(res); }) .catch(function(err){   console.log(err); });

以上就是vue全家桶有哪些的详细容,更多请关注php中文网其它相关文章!


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

:如果评论未出现,请刷新网页,谢谢合作!

会员中心
搜索
ip签名图
    IP签名图
网站分类
标签列表
文章归档
站点信息
  • 文章总数:112038
  • 页面总数:3
  • 分类总数:12
  • 标签总数:629
  • 评论总数:2060
  • 浏览总数:1241363
爱站云安全认证