欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

*学Vue——Axios异步通信

程序员文章站 2022-07-12 19:28:56
...

首先伪造一个data.json

{
  "age": 20,
  "code": 0,
  "url": "www.123",
  "likes": {
      "name": "java",
      "age": 2
    }
}

然后通过钩子函数进行axios网络通信,绑定data.json,并且将该数据响应给Vue对象里的data

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
</head>
<body>
<div id="vue">
    {{info.age}} <br>
    <a v-bind:href="info.url">点击</a> <br>
    {{info.likes.name}}
</div>

<script>
    var vm = new Vue({
        el: "#vue",
        data() {
            return {
                info: { // 这里的属性值,要和json数据保持一致
                    age: null,
                    url: null,
                    likes: {
                        name: null,
                        age: null
                    }
                }
            }
        },
        mounted(){ // 钩子函数链式编程
          axios.get('data.json').then(response=>(this.info=response.data));
        }
    });
</script>

</body>
</html>

*学Vue——Axios异步通信

相关标签: Vue vue