axios异步获取接口数据前端展示

axios 异步通信

axios是一个开源的可以用在浏览器端和nodejs的异步通信框架，他的主要作用就是实现ajax异步通信

mounted 钩子函数

<div id="app">
<div v-for="i in info" ::key="i.vul_id">
<div>
<!--                v-bind 绑定的缩写 就是 ':' -->
漏洞名称:<a target="_blank" :href="i.vul_name" >{{ i.vul_name }}</a>
</div>
<div>
漏洞危害级别: {{ i.vul_level }}
</div>
<div>
漏洞开放时间: {{ i.open_time }}
</div>
<div>
是否存在poc: {{ i.poc_status }}
</div>
</div>
</div>

var vue = new Vue({
el : "#app",
data() {
return{
info: {
vul_id: "",
vul_name: '',
vul_level: '',
open_time: '',
poc_status: '',
}
}
},
// mounted 钩子函数获取json数据
mounted() {
axios.get("data.json").then(response=>this.info=response.data)

}

})