vue.js开发外卖App项目的vue-resource总结(六)
2017-10-09 10:42
801 查看
在vue.js中,data属性是一个函数,因为组件可以被复用,data定义为对象时,修改某个组件,会影响另一个组件,所以data要被定义为一个函数。
ES6的风格规范:
vue社区有个比较火的插件:vue-resource,用来处理前后端请求数据交互的。它支持XMLHttpRequest和JSONP的支持。
vue-resource和vue-router一样都是第3方插件,第三方插件通过模块的方式引用的时候,需要注册,
以下是vue-resource的使用,this指代vue的实例,用了vue-resource,相当于给每个vue实例扩展了一个$http属性,
需要vue-resource发起一个ajax请求,什么时候发起呢?每个vue实例都有一个生命周期,有个created钩子函数,我们在created函数中发起请求。
在vue-resourve的1.0版本,
其中vue-resource支持promise的api的写法,promise支持通过同步链式的写法支持一些异步操作。
在以上打印出的对象 this.seller 可以发现,该object的每个字段都有一个get和set方法,vue在实例化过程中,自动给字段添加了get和set方法,其中observer监听这些对象,实现了如果修改这些对象,修改可以自动映射到dom上
以上代码中,then方法的第一个参数为一个成功的回调,在vue-resource中response为一个属性,而在ajax或者jquery中为Json对象。其中以上拿到的response 为
可以在network面板看ajax请求是否发送,
eslint在箭头函数两侧必须加空格,
只要将eslint规则配置为0,则不去检测它
数据传递给组件
其中v-bind指令简写为
而在header组件中,通过props属性接收传过来的数据
插件postcss是根据caniuse官网去写的代码。
css样式如下:
ES6的风格规范:
data()后面需要添加空格
export default{ data() { } }
vue社区有个比较火的插件:vue-resource,用来处理前后端请求数据交互的。它支持XMLHttpRequest和JSONP的支持。
vue-resource的使用
在package.json中配置vue-resource,在package.json中声明完依赖后,然后npm install安装vue-resource"dependencies": { "vue": "^1.0.21", "vue-resource":"^1.0.1", "vue-router":"^0.7.13", "babel-runtime": "^6.0.0", "better-scroll": "^0.1.7" }
vue-resource和vue-router一样都是第3方插件,第三方插件通过模块的方式引用的时候,需要注册,
这块在main.js文件中 import Vue from 'vue'; import VueResource from 'vue-resource';//模块化引入 Vue.use(VueResource);//全局注册
以下是vue-resource的使用,this指代vue的实例,用了vue-resource,相当于给每个vue实例扩展了一个$http属性,
需要vue-resource发起一个ajax请求,什么时候发起呢?每个vue实例都有一个生命周期,有个created钩子函数,我们在created函数中发起请求。
在vue-resourve的1.0版本,
//在app.vue文件中 export default{ created() { //以下代码为发送ajax请求 this.$http.get('/api/seller?id=' + this.seller.id).the 4000 n((response) => { response = response.body; //通过body获取object对象 if (response.errno === ERR_OK) {//ERR_OK为状态码 this.seller = Object.assign({}, this.seller, response.data); // console.log(this.seller.id); } }); }, }
其中vue-resource支持promise的api的写法,promise支持通过同步链式的写法支持一些异步操作。
在以上打印出的对象 this.seller 可以发现,该object的每个字段都有一个get和set方法,vue在实例化过程中,自动给字段添加了get和set方法,其中observer监听这些对象,实现了如果修改这些对象,修改可以自动映射到dom上
以上代码中,then方法的第一个参数为一个成功的回调,在vue-resource中response为一个属性,而在ajax或者jquery中为Json对象。其中以上拿到的response 为
{ errno:0, data:seller }
该数据在dev-server.js中
apiRoutes.get('/seller',function (req,res) {
res.json({ errno:0, data:seller });
});
可以在network面板看ajax请求是否发送,
eslint在箭头函数两侧必须加空格,
() => {}
只要将eslint规则配置为0,则不去检测它
数据传递给组件
<v-header :seller="seller"></v-header> export default{ data() { return { seller: { id: (() => { let queryParam = urlParse(); return queryParam.id; })() } }; }, created() { this.$http.get('/api/seller?id=' + this.seller.id).then((response) => { response = response.body; if (response.errno === ERR_OK) { this.seller = Object.assign({}, this.seller, response.data); // console.log(this.seller.id); } }); }, components: { 'v-header': header } };
其中v-bind指令简写为
:
而在header组件中,通过props属性接收传过来的数据
export default{ props: { seller: { type: Object } }, }
插件postcss是根据caniuse官网去写的代码。
flex布局的应用
以下布局应用到flex<div class="title"> <div class="line"></div> //应用span可能在某些安卓浏览器下会有兼容性问题 <div class="text">优惠信息</div> <div class="line"></div> </div>
css样式如下:
.title display: flex width: 80% margin: 28px auto 24px auto .line flex:1 position: relative top: -6px border-bottom:1px solid rgba(255,255,255,0.2) .text padding: 0 12px font-size: 14px font-weight: 700
相关文章推荐
- vue.js开发外卖App项目的组件传值总结(七)
- vue.js开发外卖App项目的组件拆分总结(五)
- vue.js开发外卖App项目的内容总结(四)
- vue.js开发外卖App项目总结之webpack的详细配置(三)
- 前端开发工具vue.js开发实践总结
- 开发cocos2d-js项目总结(js3.6版本)
- Android App项目开发规范总结(三)
- Android_app项目开发步骤总结
- 《磨砺书店》app项目开发技术点总结(磨砺营马剑威Android)
- Android_app项目开发步骤总结
- Android开发学习总结(三)——appcompat_v7项目说明
- 项目vue2.0仿外卖APP(三)
- 项目vue2.0仿外卖APP(二)
- vue.js 开发生态总结
- Anyoffice -HTML5大赛 悦心(基于H5开发安卓音乐app)-项目总结
- Android App项目开发规范总结(二)
- Android app项目开发步骤总结
- vue项目开发总结
- Android App项目开发规范总结(一)