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