vue 笔记axios异步通信
Posted 孤注一掷 、
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 笔记axios异步通信相关的知识，希望对你有一定的参考价值。
自动补全html标签的快捷键 Tab
新建一个data.json 作为数据源
{
"name":"swk",
"url": "http://baidu.com",
"page": 1,
"isNonProfit":true,
"address": {
"street": "勤俭道",
"city":"天津",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}然后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- v-clock解决闪烁问题-->
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id="vue" v-clock>
<div>{{info}}</div>
<a v-bind:href="info.url">点我啊啊啊</a>
</div>
<!-- 1.导入Vue.js 和 axios.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data:{
},
data(){return {
info:{}
}},
mounted(){//钩子函数 链式编程
axios.get('../data.json').then(reponse=>(this.info = reponse.data));
}
});
</script>
</body>
</html>用 v-bind 将a标签和info.url绑定。
点击跳转 百度页面。
以上是关于vue 笔记axios异步通信的主要内容，如果未能解决你的问题，请参考以下文章
VueVue入门--双向绑定，Vue的组件，Axios异步通信，计算属性，插值，自定义事件