使用使用Vue调取接口调取接口,并渲染数据的示例代码并渲染数据的示例代码
刚接触vue.js框架的时候，很伤脑筋。今天整理一下post/get两种方式，简单的调取数据库数据，并进行渲染，希望帮助大
家！
首先，在首先，在HTML页面引入：页面引入：
//引入vue.js文件
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
引入vue-resource.min.js文件，就可以引入接口方法了
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
然后，在然后，在body中书写中书写div：：
//id在下面js中进行引用
<div id="box">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>序号</td>
<td>姓名</td>
<td>头像</td>
</tr>
//v-for 循环数据表中的数据
<tr v-for="v in msg">
<td>{{v.id}}</td>
<td>{{v.username}}</td>
<td>{{v.photo}}</td>
</tr>
</table>
</div>
第三，第三，js代码：代码：
<script type = "text/javascript">
window.onload = function(){
//实例化vue类
var vm = new Vue({
//绑定box
el:'#box',
data:{
//设置msg内容为空，在请求数据前为空的状态
msg:'',
},
mounted:function () {
//调取本地的get(就在下面)
this.get();
},
methods:{
get:function(){
//发送get请求
this.$http.post('http://你的IP/api/方法',{key:"密钥"},{emulateJSON:true}).then(function(res){
//msg等于回调函数返回的res(值)
this.msg=res.body.data;
//在打印台测试打印，无误后一定要删除
console.log(res);
},function(){
console.log('请求失败处理');
});
}
}
});
}
</script>
控制器：控制器：
public function index()
{
// //引入秘钥
$pwd=new ApisModel();
$passwd=$pwd->passwd();
weixin_38706007
- 粉丝: 6
- 资源: 912
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- 京瓷TASKalfa系列维修手册：安全与操作指南
- 小波变换在视频压缩中的应用
- Microsoft OfficeXP详解：WordXP、ExcelXP和PowerPointXP
- 雀巢在线媒介投放策划：门户网站与广告效果分析
- 用友NC-V56供应链功能升级详解(84页)
- 计算机病毒与防御策略探索
- 企业网NAT技术实践：2022年部署互联网出口策略
- 软件测试面试必备：概念、原则与常见问题解析
- 2022年Windows IIS服务器内外网配置详解与Serv-U FTP服务器安装
- 中国联通：企业级ICT转型与创新实践
- C#图形图像编程深入解析：GDI+与多媒体应用
- Xilinx AXI Interconnect v2.1用户指南
- DIY编程电缆全攻略：接口类型与自制指南
- 电脑维护与硬盘数据恢复指南
- 计算机网络技术专业剖析：人才培养与改革
- 量化多因子指数增强策略：微观视角的实证分析
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
