21-axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/axios.js"></script>
</head>
<body>
    <div id="box">
        <button @click="handleClick()">axios</button>
        <ul>
            <li v-for="item in dateList" :key="item.id">
                <!-- <img :src="item.img.replace('w.h','')+ '@1l_1e_1c_128w_180h'" alt=""> -->
                <img :src="handleImage(item.img)" alt="">
                <p>{{item.nm}}</p>
                <p>{{item.sc}}</p>
                <p>{{item.star}}</p>
                <p>{{item.showInfo}}</p>
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:'#box',
            data:{
                dateList:[]
            },
            methods:{
                handleClick(){
                    axios.get("json/maoyan.json").then(res=>{
                        console.log(res.data.movieList)
                        this.dateList = res.data.movieList
                    })
                },
                handleImage(path){
                    return path.replace('w.h','')+ '@1l_1e_1c_128w_180h'
                }
            }
        })

       /* 
        post请求
        方法一
        axios.post("json/test.json","name=xiaoming&age=18").then(res=>{})
        方法二
        axios.post("json/test.json",
           {
            name:'xiaoming',
            age:18
           }
        ).then(res=>{})
        */
    </script>
</body>
</html>
21-axios

推荐阅读更多精彩内容
