Vue学习第三天 之http请求 Vue-自带vue-resource插件实现http请求
2018-02-25 14:42
591 查看
安装
本地环境安装路由插件vue-resource: cnpm install vue-resource --save-dev *没有安装淘宝镜像的可以将 cnpm 替换成 npm
想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.html,(打开搜索
镜像 即可跳转到对应位置)
配置
1.引用
main.js中用import引入进来:
2.注册
同样,main.js中注册,同vue-router
3.配置
直接在对应页面的created钩子函数配置即可:
4. 使用数据
根据拿到的数据结构和内容对应渲染
页面中直接渲染使用:
用到vue-resource的页面代码参考:
1 <template> 2 <div class="app-cont"> 3 <div class="vue-resource"> 4 <h3>获取其他地址里的json数据并进遍历</h3> 5 <ul> 6 <li v-for="item in arrs" v-on:click="item.completed = ! item.completed"> 7 <!-- {{item}} --> 8 <span class="id">{{item.userId}} </span> 9 <span class="title">{{item.title}}</span> 10 <span class="completed" v-show="item.completed">选中</span> 11 </li> 12 </ul> 13 </div> 14 </div> 15 </template> 16 <script> 17 export default{ 18 name: "app-cont", 19 data () { 20 return { 21 arrs:{} 22 } 23 }, 24 methods: { 25 }, 26 // 页面加载之前,用created钩子函数-获取网页数据 27 created() { 28 this.$http.get("http://jsonplaceholder.typicode.com/todos") 29 .then((data) => { 30 // console.log(data) 31 this.arrs = data.body; 32 }) 33 } 34 } 35 </script> 36 <style scoped> 37 h2{ 38 margin: 0; 39 padding: 10px 0; 40 background: #f5f5f5; 41 } 42 ul{ 43 display: flex; 44 flex-wrap: wrap; 45 margin: 0 auto; 46 padding: 10px 0; 47 } 48 li{ 49 position: relative; 50 flex-grow: 1; 51 flex-basis: 200px; 52 text-align: center; 53 padding: 30px; 54 margin: 5px; 55 border: 2px solid Lightgreen; 56 } 57 li:hover{ 58 background: Lightgreen; 59 cursor: pointer; 60 } 61 span{ 62 color: #333; 63 font-weight: bold; 64 } 65 .vue-resource{ 66 margin: 20px 40px; 67 border: 1px solid Lightgreen; 68 background: #eee; 69 } 70 span{ 71 display: block; 72 } 73 span.id{ 74 width: 75%; 75 margin: 0 auto 20px; 76 padding: 10px 0; 77 border-bottom: 1px solid Lightgreen; 78 } 79 80 span.completed{ 81 position: absolute; 82 top: -6px; 83 right: 10px; 84 z-index: 999; 85 width: 20px; 86 height: 45px; 87 padding-top: 5px; 88 color: #90ee90; 89 background: #000; 90 } 91 </style>
相关文章推荐
- Vue-自带vue-resource插件实现http请求
- ajax请求插件vue-resource的学习
- vue-resource请求,实现http登录拦截或者路由拦截
- vue-resource请求超时实现http拦截及路由拦截
- ajax请求插件vue-resource的学习
- vue-resource请求实现http登录拦截或者路由拦截的方法
- ajax请求插件vue-resource的学习
- vue.js学习07之使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
- Vue-resource实现ajax请求和跨域请求
- [Java学习] java实现http的Post、Get、代理访问请求
- 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件
- vue学习第21天,vue-resource 插件
- 用NodeJS/express-4.0实现的静态文件服务器(serveStatic插件直接支持HTTP Range请求,因此可用来做mp4流媒体服务器)
- 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件
- 关于使用vue 的resource插件用post请求数据时一直是options的解决方案
- 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件
- 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件
- HTTP请求出错(no resource): Android4.0不能在主线程中进行HTTP请求
- Vue-resource实现ajax请求和跨域请求
- 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件