直接上代码:
注意:js部分需要在script标签增加 type=“text/babel”,不然无法被babel转译,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<body>
<div id="app">
我的消息:{{ message }} <br />
我的axios:{{axiosData}}
</div>
</body>
<script type="text/babel">
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
axiosData: "",
},
mounted() {
axios
.get(
"https://www.fastmock.site/mock/c9c7461f2ef67dde838195bd837154fc/study/api/study"
)
.then((res) => {
this.axiosData = res.data.data;
});
},
});
</script>
</html>