Vue系列之 => 通过vue-resource发起ajax请求
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue=resource基本使用</title>
<script src="./lib/jquery2.1.4.min.js"></script>
<script src="./lib/Vue2.5.17.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
<!-- Github : https://github.com/pagekit/vue-resource -->
<!-- 除了vue-resource之外，还可以使用 axios 的第三方包实现数据的请求 -->
<!-- 使用方式 this.$http.get || post || jsonp -->
</head>
<style>
</style> <body>
<div id="app">
<input type="button" class="btn btn-primary" value="get请求" @click="getInfo">
<input type="button" class="btn btn-primary" value="post请求" @click="postInfo">
<input type="button" class="btn btn-primary" value="jsonp请求" @click="jsonInfo">
</div> <script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() {//发起get请求
//当发起get请求之后，通过.then来设置，接收返回结果res是个对象。
//接口地址已失效
this.$http.get("http://vue.studyit.io/api/getlunbo").then(function(res){
console.log(res);
})
},
postInfo(){
//第一个传的对象是数据，第二个传的对象是配置选项
this.$http.post("http://vue.studyit.io/api/getlunbo",{},{emulateJSON:true}).then(res => {
console.log(res);
})
},
jsonInfo(){//发起jsonp请求
this.$http.post("http://vue.studyit.io/api/jsonp").then(res => {
console.log(res);
})
}
},
})
</script>
</body> </html>
Vue系列之 => 通过vue-resource发起ajax请求的更多相关文章
- vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...
- Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- 前端vue系列-起始篇 vue的基本认知
hi,大家伙,我是佛系大大,很高兴与你们一起沟通,学习,进步. 很久不更新博客了,现在回来再写博客,尽然是有些怀念的感觉,幸福的感觉.因为写博客,内心会很宁静,沉浸在自己的世界中,是很幸福的一件事.当 ...
- VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
- JQuery发起ajax请求，并在页面动态的添加元素
页面html代码: <li> <div class="coll-tit"><span class="coll-icon">& ...
- vue使用resource发送ajax请求
<script type="text/javascript"> new Vue({ el:'#app', created:function(){ var url=&qu ...
- VUE系列二：vue基础
一.组件嵌套 1. 新建一个组件Users.vue <template> <div class="users"> <ul> <li v-f ...
- Ecstore中如何调用发起Ajax请求
Ecstore的JS框架使用了mootools,所以ajax调用也使用mootools中的Request组件. 语法: var myRequest = new Request([options]); ...
- Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
随机推荐
- Python生成器表达式
https://www.cnblogs.com/liu-shuai/p/6098218.html 简介: 生成器表达式并不真正的创建数字列表,而是返回一个生成器对象,此对象在每次计算出一个条目后,把这 ...
- javaweb连接数据库并完成增删改查
一.连接数据库 1.mysql数据库的安装和配置 在网上找到了篇关于mysql的安装详细说明,供读者自己学习 https://www.jb51.net/article/23876.htm 2.mysq ...
- EntityFramework_基础
什么是EF EF是一种ORM(Object-relational mapping)框架,它能把我们在编程时使用对象映射到底层的数据库结构.它可以让应用程序开发者将关系型数据作为业务模型来使用,也消除了 ...
- 《Redis 集群》
由于集群这章节内容较多,也比较重要,所以单独拉出来,做一个小章节. 1:如何搭建一个集群? - 环境为 Ubuntu16.04 - 这里我预计使用 9001 - 9006 端口,生成一个 6 台机器的 ...
- Python开发【模块】：tornado.queues协程的队列
协程的队列 协调生产者消费者协程. from tornado import gen from tornado.ioloop import IOLoop from tornado.queues impo ...
- 第5章 实现windows程序的数据绑定
1:连接式: command 对象负责对数据库的执行命令 DataReader 对象负责从数据源中读取数据 connection 对象负责链接数据库 断开式: 数据集的Dataset存放在独立的数据源 ...
- QPS、PV 、RT（响应时间）之间的关系
QPS.PV .RT(响应时间)之间的关系 在进行系统性能压测和系统性能优化的时候,会涉及到QPS,PV,RT相关的概念,本文总结一下QPS,PV,RT之间的关系,放在博客备忘,本文参考了之前在淘宝工 ...
- wordpress去掉<link rel='dns-prefetch' href='//s.w.org' />
我们在用wordpress建站时经常会看到<link rel='dns-prefetch' href='//s.w.org' />,应该是为了从s.w.org预获取表情和头像,目的是提高网 ...
- 10.26 配置psplkf小程序
环境 服务器 Win Server 2008,nginx, maven, psplkf 标准的mvn工程,可以使用eclipse,导入,file-import-maven project就行, 但是我 ...
- iText C# 合并PDF文件流,以及A5变A4时内容默认放在最底下的问题的解决方法；ASP.NET 实现Base64文件流下载PDF
/// <summary> 合併PDF檔(集合) </summary> /// <param name="files">欲合併PDF檔之集合(一 ...