<!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请求的更多相关文章

  1. vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询

    vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...

  2. Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  3. 前端vue系列-起始篇 vue的基本认知

    hi,大家伙,我是佛系大大,很高兴与你们一起沟通,学习,进步. 很久不更新博客了,现在回来再写博客,尽然是有些怀念的感觉,幸福的感觉.因为写博客,内心会很宁静,沉浸在自己的世界中,是很幸福的一件事.当 ...

  4. VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

  5. JQuery发起ajax请求，并在页面动态的添加元素

    页面html代码: <li> <div class="coll-tit"><span class="coll-icon">& ...

  6. vue使用resource发送ajax请求

    <script type="text/javascript"> new Vue({ el:'#app', created:function(){ var url=&qu ...

  7. VUE系列二：vue基础

    一.组件嵌套 1. 新建一个组件Users.vue <template> <div class="users"> <ul> <li v-f ...

  8. Ecstore中如何调用发起Ajax请求

    Ecstore的JS框架使用了mootools,所以ajax调用也使用mootools中的Request组件. 语法: var myRequest = new Request([options]); ...

  9. Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

随机推荐

  1. dp的斜率优化

    对于刷题量我觉得肯定是刷的越多越好(当然这是对时间有很多的人来说. 但是在我看来我的确适合刷题较多的那一类人,应为我对知识的应用能力并不强.这两天学习的内容是dp的斜率优化.当然我是不太会的. 这个博 ...

  2. 2018/04/24 PHP 设计模式之注册树模式

    之前学习了工厂模式和单例模式,明白了他们的意义. 但是我们在之后的使用中会发现一个问题,在新建一个实例的时候还是需要调用一个单例或者工厂,之后还是造成了代码和耦合和不好处理. 下面开始说一下: -- ...

  3. Java之旅_面向对象_抽象类

    参考并摘自:http://www.runoob.com/java/java-abstraction.html Java抽象类: 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有 ...

  4. vue中封装一个全局的弹窗js

    /** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 * <!--自定义提示标题,内容,单个按钮事件--> ...

  5. mysql数据库的备份和还原

    mysql数据库的备份命令:mysqldump -u root  -p 要备份的现有数据库名  >  备份后的sql文件名.sql,例如:  mysqldump -u root -p  heal ...

  6. 洛谷P3247 最小公倍数 [HNOI2016] 分块+并查集

    正解:分块+并查集 解题报告: 传送门! 真的好神仙昂QAQ,,,完全想不出来,,,还是太菜了QAQ 首先还是要说下,这题可以用K-D Tree乱搞过去(数据结构是个好东西昂,,,要多学学QAQ),但 ...

  7. 封装 vue 组件的过程

    首先,组件可以提升整个项目的开发效率.能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发的缺点:效率低,难维护,复用性等问题: 然后,使用Vue.extend方法创建一个组件,然后使用 Vue ...

  8. 【Jmeter】if控制器+循环控制器+计数器，控制接口分支

    但是我不想这么做,接口只想写一次,让循环控制器和if控制器去判断接口,执行我想要的分支.这里遇到了一个问题,if控制器通过什么去判断接下来的分支?我引入了一个计数器的概念.起始值为0,每次循环加1,将 ...

  9. SSAS下玩转PowerShell

     操作SSAS数据库的方法有非常多,是否有一种能够方法能够通过脚本自己主动去做这些事呢,比方处理分区,创建备份以及监视SSAS的执行状况.   原文地址: http://www.mssqltips ...

  10. mysql命令行各个参数解释

    mysql命令行各个参数解释 http://blog.51yip.com/mysql/1056.html Usage: mysql [OPTIONS] [database]   //命令方式 -?, ...