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)

      }

    })