Vue 全家桶介绍-超详细教程

Vue系列水桶入门-超详细教程。

Vue系列水桶入门-超详细教程。

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操作。

1.Vue-cli是快速构建这个单页应用程序的支架。

#全局安装vue-cli。

$ npm安装-全局vue-cli

#基于webpack模板创建新项目。

$ vue init webpack my-project

#安装依赖项，开始。

$ cd我的项目

$ npm安装

$ npm运行开发

第二，vue路由器。

安装：npm installvue-router。

如果在模块化项目中使用，则必须通过Vue.use()显式安装路由功能：

从' vue '导入Vue

从“虚拟路由器”导入虚拟路由器

Vue.use(VueRouter)

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

三.vuex

vuex为vue.js应用开发的状态管理可以理解为全局数据管理。Vuex主要由五个部分组成：状态动作、突变、吸气和吸气。

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

1、状态

类似vue对象的数据用于存储数据和状态。存储的数据是响应的。如果数据发生变化，依赖于数据的组件也会相应地发生变化。

获取状态的两种方法示例：

1 . store . getter[' GetRateUserInfo ']

2.mapgetter({ 0

Userinfo : '登录/userinfo '，//用户信息。

Menulist:' get menulist '，//审批运费率审批。

user info : ' getrateuserinfo '//rate用户信息。

})

注意：您可以通过映射状态将全局state和getters映射到当前组件的计算属性。

2、行动

Action由store.dispatch方法触发：action支持异步调用(可以调用api)，突变只支持操作同步，action提交突变不直接改变状态。

例如：

const store=new Vuex。商店({ 0

状态： {

计数： 0

},

突变： {

增量(状态){ 0

状态.计数

}

},

操作： {

增量(上下文){ 0

context.commit('increment ')

}

}

})

Action函数接受与存储实例具有相同方法和属性的上下文对象，因此您可以调用context.commit提交一个突变，或者通过context.state和context.getterss获取状态和getter.

在实践中，我们经常使用ES2015的参数解构来简化代码(尤其是当我们需要多次调用commit时):

操作：{

增量({ commit }){ 0

提交(“增量”)

}

}

3、突变

每个突变都有一串事件类型(type)和一个回调函数(handler).这个回调函数是我们实际改变状态的地方，它会接受状态作为第一个参数。

4、吸气剂

Vuex允许我们在存储中定义“getter”(可以认为是存储的计算属性)。就像计算属性一样，getter的返回值根据其依赖关系进行缓存，只有当其依赖关系值发生变化时才会重新计算。

const getters={

getRateInitData: state=state . rateinitdata，

getchooseratobj : state=state . chooseratobj，

getsearchreadparams 3360 state=state . searchreadparams，

getsearchlateresult : state=state . searchlateresult，

getrateuserinfo : state=state。RateUserInfo，

getmenulist : state=state . menulist，

getratequeryparams 3360 state=state . ratequeryparams，

getratequeryresult : state=state . ratequeryresult，

getcheckratedetailparams 3360 state=state . checkratedetailparams，

getreferencecondition : state=state。参考条件，

getWaitApprovalParams:状态=state.waitApprovalParams

}

mapGetters辅助函数

mapGetters辅助函数仅仅是将商店中的吸气剂映射到局部计算属性：

四、axios

axios是一个超文本传送协议(超文本传输协议的缩写)请求包，vue官网推荐使用axios进行超文本传送协议(超文本传输协议的缩写)调用。

安装：

国家预防机制安装axios -保存

例子：

1.发送一个得到请求

//通过给定的身份来发送请求

axios.get('/userID=12345 ')。然后（函数（响应){ 0

console.log(响应);

})。catch(函数(err))

控制台。日志(err)；

});

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

axios.get('/user '，{ 0

参数：{

ID:12345

}

})。然后（函数（响应){ 0

console.log(响应);

})。catch(函数(err))

控制台。日志(err)；

});

2、发送一个邮政请求

axios.post('/user '，{ 0

名字： '弗雷德，

姓氏： '燧石'

})。然后（函数)

控制台。日志(RES)；

})。catch(函数(err))

控制台。日志(err)；

});

具体参考：https://www .健叔。com/p/df 464 b 26 AE 58