网上很多资料都要npm install vue等等，不适合初学者，因此也踩了很多坑，其实这些完全不必要，配置不是关键，我们的重心是写代码，写逻辑，为什么要花那么多时间浪费在环境搭建上呢？这篇心得让你不需要npm，让学习快速进入正轨。
1、下载js包
vue.js:
axios.js:
2、写一个测试接口
Spring + Springboot + MyBatis ，下载地址：
[email protected]:PigPigBoy/api.git
2、DDL SQL
CREATE TABLE `user` (
`user-id` int(3) unsigned zerofill NOT NULL AUTO_INCREMENT,
`user-name` varchar(40) DEFAULT NULL,
`user-age` int(2) unsigned DEFAULT NULL,
`user-sex` varchar(1) DEFAULT NULL,
PRIMARY KEY (`user-id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3、HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
<title>Vue之ajax请求</title>
<style type="text/css">
b {
color: red;
}
pre {
font-size: 20px;
}
</style>
</head>
<body>
<h3>vue实现get、post、jsonp请求</h3>
<p>在之前可通过原生实现ajax但很繁琐，jq对其进行了封装，虽然简单，但是操作了DOM，所以要避免</p>
<h3>除了<b>vue-resource</b>外，也可以使用<b>axios</b>第三方包实现数据的请求</h3>
<h3>从vue2.0开始，推荐使用axios实现ajax请求</h3>
<hr />
<div id="app">
<h4 v-for="(item,index) in lists" :key="index">
<label>Array[{{ index }}]: id={{ item.userId }}</label>
<label> name={{ item.userName }}</label>
<label> age={{ item.userAge }}</label>
<label> sex={{ item.userSex }}</label>
</h4>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
lists: []
},
methods: {
getData() {
const that = this
// const axios = require('axios');
axios.get('http://localhost:8888/api/list')
.then(function(res) {
//请求成功
console.log("请求成功")
// console.log(res.data)
that.lists = res.data
}).catch(function(err) {
//请求失败
console.log("请求失败")
console.log(err)
}).finally(function() {
console.log("always do it")
})
}
},
/*mounted第四个生命周期函数，表示内存中的模板已经挂载到页面，
页面已渲染完毕，页面上的数据已是最新的。它是实例创建期间最后一个
生命周期函数。这个函数执行完毕，实例就被创建完毕。
如果没有其他操作的话，此时实例就在内存中不动了。
可以简单的理解为页面加载的时候执行这个函数。*/
mounted: function() {
this.getData()
}
})
</script>
</body>
</html>
4、HTML目录结构
5、效果
6、附：B站——学习的天堂
- vue专题之axios：
- CSS3之Flex布局：
- ES6甜美女声教学：
https://www.bilibili.com/video/av47304735?from=search&seid=9943411705739773559
- HBuilderX：
原创文章 3
获赞 3
访问量 381