Vue学习笔记十二：vue-resource的基本使用
Vue不提倡使用操作DOM，所以Jquery不使用了，ajax也不使用了。所以，Vue给我们提供了一种和ajax差不多功能的指令，vue-resource
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜀云泉</title>
<script type="text/javascript" src="../lib/vue-2.6.10.js"></script>
<script type="text/javascript" src="../lib/vue-resource.min.js"></script>
</head>
<body>
<!-- 这个div就是MVVM中的V，View -->
<div id="app">
<input type="button" value="get请求" @click='getInfo'>
<input type="button" value="post请求" @click='postInfo'>
<input type="button" value="jsonp请求" @click='jsonpInfo'>
</div>
<script>
// 这个vm就是MVVM中的VM，ViewModel
var vm=new Vue({
el: '#app',
// 这个data就是MVVM中的M，Model
data: {
msg:''
},
methods: {
getInfo(){
this.$http.get('http://jsonplaceholder.typicode.com/users').then(result=>{
//成功了的回调函数
console.log(result.body)
})
},
postInfo(){
this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result=>{
console.log(result.body);
})
},
jsonpInfo(){
this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{
//成功了的回调函数
console.log(result.body)
})
}
},
filters:{
}
})
</script>
</body>
</html>
需要下载vue-resource.min.js，然后引用，具体的三种方式都写在代码里了，get，post和jsonp方式
浏览器效果
防盗链接：本博客由蜀云泉发表
Vue学习笔记十二：vue-resource的基本使用的更多相关文章
- Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- python3.4学习笔记(十二) python正则表达式的使用，使用pyspider匹配输出带.html结尾的URL
python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...
- Go语言学习笔记十二： 范围(Range)
Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记（二）——简单的介绍以及安装
学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...
- vue学习（十二）vue全家桶 Vue-router&Vuex
一 vue-router的安装 二 vue-router的基本使用 三 命名路由 四 动态路由的匹配和路由组件的复用 一 vue-router的安装 NPM npm install vue-route ...
- 从零开始的vue学习笔记（二）
数据与方法 当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中.data的数据和视图同步更新. 实例创建后添加一个新的属性,对这个属性的的改动将不会触发任何 ...
- java jvm学习笔记十二（访问控制器的栈校验机制）
欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 本节源码:http://download.csdn.net/detail/yfqnihao/4863854 这一节,我们 ...
随机推荐
- php流程控制 之循环语句的使用
循环语句的使用 王同学需要反复往返于北京和大连,就是典型的循环结构.假设王思总投资这个项目需要往返大连100次,每次往返都王同学都会计数一次.难道我们写一百遍同样的代码?显然对于智商极高的程序员来说不 ...
- IP地址与Mac地址绑定错误
有个application,有时候可以正常访问,有时候又返回404错误,百思不得其解.刚开始以为是文件夹权限问题,折腾了好久. 后来没在服务器上monitor到包,所以猜想是到了错误的mac地址,用a ...
- (尚006)Vue计算属性之set与get
test004.html <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...
- ERROR: `elasticsearch` directory is missing in the plugin zip
该问题出现在为elasticsearch安装中文分词器插件时 问题发生在插件和es版本不匹配~ 解决: es版本与插件版本对应齐 命令行安装 C:\Users\SeeClanUkyo>F:\el ...
- c语言实现杨辉三角形
#include <stdio.h> int main(void) { int a[9][9]={}; int i,j; for(i=0;i<9;i++){ for(j=0;j< ...
- 玩好JDK[转]
ref: https://www.cnblogs.com/zuoxiaolong/p/life53.html java-reference:https://docs.oracle.com/en/jav ...
- LOJ6071. 「2017 山东一轮集训 Day5」字符串 [SAM]
LOJ 思路 这种计数题显然是要先把每一个合法的串用唯一的方法表示出来.(我连这都没想到真是无可救药了) 如何唯一?容易想到把前缀尽可能多地在第一个串填掉,然后填第二个,第三个-- 如何做到这样?可以 ...
- 利用HTML和CSS设计一个静态的“小米商城官网首页”
一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...
- Python3正则表达式
正则表达式是一个特殊的字符序列,他能帮助你方便的检查一个字符串是否与某种模式匹配. re.match函数 re.match尝试从字符串的起始位置匹配一个模式,如果不是起始位置匹配成功的话,matc ...
- [java][JEECG] Maven settings.xml JEECG项目初始化 RouYi settings.xml配置
好吧一下是经验之谈,原本这些坑不应该躺的,从头看手册完全可以避免这些. 懒得整理了,看懂了就看,看不懂自己琢磨JEECG的帮助文档去,不过嘛我喜欢用Intelij IDEA,他里面都是别的IDE,不喜 ...