本文主要是介绍Vue框架学习-Vue网络应用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
前言
本文是Vue框架学习的第三部分-Vue的网络应用,主要学习axios以及和Vue结合的使用。
学习资料来源是B站的一个教学视频,我在文末会附上链接。
axios基本使用
功能强大的网络请求库
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
提供了两个预先准备好的接口
- 通过get请求获取笑话的接口
- 通过post请求注册用户的接口
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewpoint" content = "width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>axios基本使用</title><link rel="stylesheet" type="text/css" href=""/>
</head><body><input type="button" value="get请求" class="get"><input type="button" value="post请求" class="post"><!-- 官方提供的axios在线地址 --><script src="http://unpkg.com/axios/dist/axios.min.js"></script><script>/*接口1:随机笑话请求地址:https://autumnfish.cn/api/joke/list请求方法:get请求参数:num(笑话条数,数字)响应内容:随机笑话*/document.querySelector(".get").onclick = function () {axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function (response) {console.log(response);},function(err){console.log(err);})}/*接口
这篇关于Vue框架学习-Vue网络应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!