網絡請求

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。