Vue Get请求数据

VUE的使用之前只是看了数据绑定、筛选这些基本的功能，没有深入接触。接下来的一个项目会用到VUE来开发，所以又简单看看，热热身~

使用http请求需要用到vue-resource 【 https://github.com/vuejs/vue-resource 】

<script src="plugin/vue/vue.js"></script>
<script src="plugin/vue-resource/dist/vue-resource.js"></script>

写的一个非常简单的数据返回：

<?php
header('Content-type:text/json');
$str = '[{"id":"1","name":"penghui1","age":"20","phone":"15839922830"},{"id":"2","name":"penghui2","age":"21","phone":"15839922830"},{"id":"3","name":"penghui3","age":"22","phone":"15839922830"},{"id":"4","name":"penghui4","age":"23","phone":"15839922830"}]';
echo $str;?>

返回结果如下：

前戏说完，步入正题，先贴一下效果：

当点击复原按钮进行请求数据（绑定了get方法）：

-------------------------分割线-------------------------

贴代码：

<body><div id="app" class="container"><button class="btn btn-primary" v-on:click="get">复原</button>
<table class="table table-condensed table-hover table-bordered"><tr class="success"><th>序号</th><th>姓名</th><th>年龄</th><th>手机号</th><th>操作</th></tr><tbody><tr v-for="(user,index) in users"><td>{{index}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td>{{user.phone}}</td><td><div class="btn-group"><button class="btn btn-primary" v-on:click="edit(user,index)">编辑</button><button class="btn btn-danger" v-on:click="deleted(index)">删除</button></div></td></tr></tbody></table>
</div>
<script src="plugin/vue/vue.js"></script>
<script src="plugin/vue-resource/dist/vue-resource.js"></script>
<script>
new Vue({
el: "#app",
data: {api:'http://localhost:87/api/student.php',users: [],
},
methods: {get: function() {this.$http.get(this.api,{emulateJSON:true}).then( (response)=>{console.log(response.data);this.users = response.body;}).catch(function(response) {console.log(response);})}
},
});</script>
</body>

get请求之前做过移动端开发，所以这次只是简单使用了一下get方式请求.

在获取到数据时要赋值给模型（this.users）,在view上已经进行了数据模型的绑定，所以当this.users更新了数据值之后，页面就加载出来数据了。在http请求时会有很多参数，具体可以参考：

http://www.doc00.com/doc/1001004eg 比较详细

记：还有一些其他的功能操作就不往上写了，实现了添加、删除和编辑功能，代码却比较乱。就先记录一下网络请求和加载吧

转载于:https://my.oschina.net/u/3172968/blog/869849

Vue Get请求数据相关推荐

vue异步请求数据重新渲染
vue异步请求数据时往往不能及时更新,下面介绍一种方法解决. export default {name: "pic",created() {this.getList();},dat ...
Vue代理请求数据出现404
Vue代理请求数据出现404 当使用代理解决跨域问题出现404错误时,一般有两种原因. 1. 需要进行pathRewrite重写比如:你想访问的真实地址为http://39.98.123.211/u ...
十一、Vue之请求数据
vue-resource axios fetch-jsonp 一.vue-resource插件请求数据 (一)安装vue-resource插件备注:在安装组件时,一定要加上 --save ,这样该组 ...
vue.js请求数据
三种方法, 1.是用jq的ajax请求之后将数据放到vue的data中, 2.是用vue-resource请求 3.axios 一.用jq ,ajax异步请求后,接收到返回的data参数并显示在前端 ...
处理vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题
1. 组件执行顺序导致: 父组件:created->子组件:created->子组件:mounted->父组件:mounted 2.问题子组件无法获取到值 //父组件 exp ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动所以封装 ...
vue 实现返回上一页不请求数据keep-alive
常规操作: 我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用. 但是我们知道,不管是我们刚进入这个页面还是从其他页面返回这个页面 ...
[vue] vue在created和mounted这两个生命周期中请求数据有什么区别呢？
[vue] vue在created和mounted这两个生命周期中请求数据有什么区别呢? 看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的 ...

Vue Get请求数据

前戏说完，步入正题，先贴一下效果：

Vue Get请求数据相关推荐

最新文章

热门文章