编程知识 cdmana.com

Vue requests interface by introducing CDN to render data and Axios to render data

This doesn't need to be npm Set up scaffolding and install Vue, Simply introduce Vue Of cdn link , That is to say , By introducing Axios Rendering data to html page .

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue axios  Render data </title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<style type="text/css">
[v-cloak] {
    display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
  <h1>Vue Cdn Axios  Render 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)) //  Pass the result set to info This array 
      .catch(function (error) {
        console.log(error);
      });
  }
})
</script>
</body>
</html>

data.json

{
    "list": [
        { "title":" use Baidu Search , You will know ","url":"www.baidu.com"},
        { "title":" Let there be no difficult business in the world ","url":"www.taobao.com"},
        { "title":" No matter how small , It's also a brand ","url":"www.weixin.com"}
    ]
}

demo

image

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

版权声明
本文为[TANKING]所创,转载请带上原文链接,感谢

Scroll to Top