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
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/52096.html