XMLHttpRequest是一个设计粗糙的API, 配置和调用方式非常混乱,而且基于事件的异步模型写起来不友好,兼容性不好.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta content=""> <meta content=""> <link href=""> <script type="text/javascript" src="http://www.likecs.com/lib/vue.js"></script> </head> <body> <div> <button @click="handleClick()">获取影片信息</button> <ul> <li v-for="data in datalist"> <h3>{{ data.name }}</h3> <img :src="data.poster"> </li> </ul> </div> <script> new Vue({ el: "#box", data: { datalist: [] }, methods: { handleClick() { fetch("./json/test.json").then(res => res.json()).then(res => { console.log(res.data.films) this.datalist = res.data.films }) } } }) </script> <!-- new Vue({ el: "#box", data:{ datalist:["111","222","333"] } }) --> </body> </html> axios请求组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta content=""> <meta content=""> <link href=""> <script src="http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/lib/vue.js"></script> </head> <body> <div> <button @click="handleClick()">正在热映</button> <ul> <li v-for="data in datalist"> <h1>{{ data.name }}</h1> <img :src="data.poster"> </li> </ul> </div> <script> new Vue({ el: "#box", data: { datalist: [] }, methods: { handleClick() { axios.get("./json/test.json").then(res => { // axios 自欧东包装data属性 res.data console.log(res.data.data.films) this.datalist = res.data.data.films }).catch(err => { console.log(err); }) } } }) </script> </body> </html>