vue引入链接
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
使用 jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
使用 unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-clock] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-clock>
<div>{{info.name}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data() {
//请求返回的参数必须和JSON字符串一致
return {
info: {
name: null,
sex: null
}
}
},
mounted() { // 钩子函数,链式编程
axios.get('data.json').then(res => (this.info = res.data));
}
});
</script>
</body>
</html>
{
"key1": "value1",
"key2": "value2"
}
{
"sites": {
"site": [
{
"id": "1",
"name": "菜鸟教程",
"url": "www.runoob.com"
},
{
"id": "2",
"name": "菜鸟工具",
"url": "c.runoob.com"
},
{
"id": "3",
"name": "Google",
"url": "www.google.com"
}
]
}
}
版权声明:本文为weixin_46009389原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。