网络请求

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

正常情况，需要公司的服务器。

一、网络请求
需要vue-resource.js插件

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

<!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}
]

 

posted @ 2017-11-03 15:35  匿名的girl  阅读(265)  评论(0)  编辑  收藏  举报