网络请求

时间 2019-11-19

原文原文链接

fake api:
http://jsonplaceholder.typicode.com/posts
方便对于网络模块作测试。html

正常状况，须要公司的服务器。vue

1、网络请求
须要vue-resource.js插件json

this.$http
.get('url')
.then(function(response){
// response.data 就是服务器端所返回的数据
})api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    
</head>
<body>
<div id="container">
    <p>{{msg}}</p>
    <ul>
        <li v-for="tmp in myList">{{tmp}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: "#container",
        data: {
            msg: "Hello Vue",
            myList:[]
        },
        mounted:function(){
            //发起网络请求
            this.$http.get("data/test.json").then(function(response){
                console.log(response);
                this.myList = response.data;
            })
        }
    })
</script>
</body>
</html>

data/test.json文件[
  {"name":"Tom","age":20},
  {"name":"Tom","age":20},
  {"name":"Tom","age":20}
]