Vue requests the interface by introducing CDN to render data, and Axios renders data

Time:2021-8-7

This does not require NPM to build a scaffold to install Vue. It can be achieved by simply introducing the CDN link of Vue. Axios is introduced to render data to HTML pages.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
< title > Vue Axios render data < / Title >
<script></script>
<script></script>
<style type="text/css">
[v-cloak] {
    display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
  <h1>Vue CDN Axios rendering data</h1>
  <div v-for="site in info">
    {{ site.title }}<br/>
    {{ site.url }}<br/><br/>
  </div>
</div>
<script type = "text/javascript">
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('./data.json')
      . then (response = > (this. Info = response. Data. List)) // transfer the result set to the info array
      .catch(function (error) {
        console.log(error);
      });
  }
})
</script>
</body>
</html>

data.json

{
    "list": [
        {"title": "Baidu, you will know", "URL": "www.baidu. Com"},
        {"title": "let the world have no difficult business", "URL": "www.taobao. Com"},
        {"title": "no matter how small an individual is, it is also a brand", "URL": "www.weixin. Com"}
    ]
}

demo

Vue requests the interface by introducing CDN to render data, and Axios renders data

http://likeyunba.com/demo/Vue…

Author:TANKING
Web:http://www.likeyun.cn/
Date:2020-11-11
WeChat:face6009