Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container { } .container .cart { width: 300px; margin: auto; } .container .title { background-color: lightblue; height: 40px; line-height: 40px; text-align: center; /*color: #fff;*/ } .container .total { background-color: #FFCE46; height: 50px; line-height: 50px; text-align: right; } .container .total button { margin: 0 10px; background-color: #DC4C40; height: 35px; width: 80px; border: 0; } .container .total span { color: red; font-weight: bold; } .container .item { height: 55px; line-height: 55px; position: relative; border-top: 1px solid #ADD8E6; } .container .item img { width: 45px; height: 45px; margin: 5px; } .container .item .name { position: absolute; width: 90px; top: 0;left: 55px; font-size: 16px; } .container .item .change { width: 100px; position: absolute; top: 0; right: 50px; } .container .item .change a { font-size: 20px; width: 30px; text-decoration:none; background-color: lightgray; vertical-align: middle; } .container .item .change .num { width: 40px; height: 25px; } .container .item .del { position: absolute; top: 0; right: 0px; width: 40px; text-align: center; font-size: 40px; cursor: pointer; color: red; } .container .item .del:hover { background-color: orange; } </style> </head> <body> <div> <div> <my-cart></my-cart> </div> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> var CartTitle = { template: ` <div>我的商品</div> ` } var CartList = { template: ` <div> <div> <img src="http://www.likecs.com/img/a.jpg"/> <div></div> <div> <a href="">－</a> <input type="text" /> <a href="">＋</a> </div> <div>×</div> </div> <div> <img src="http://www.likecs.com/img/b.jpg"/> <div></div> <div> <a href="">－</a> <input type="text" /> <a href="">＋</a> </div> <div>×</div> </div> <div> <img src="http://www.likecs.com/img/c.jpg"/> <div></div> <div> <a href="">－</a> <input type="text" /> <a href="">＋</a> </div> <div>×</div> </div> <div> <img src="http://www.likecs.com/img/d.jpg"/> <div></div> <div> <a href="">－</a> <input type="text" /> <a href="">＋</a> </div> <div>×</div> </div> <div> <img src="http://www.likecs.com/img/e.jpg"/> <div></div> <div> <a href="">－</a> <input type="text" /> <a href="">＋</a> </div> <div>×</div> </div> </div> ` } var CartTotal = { template: ` <div> <span>总价：123</span> <button>结算</button> </div> ` } Vue.component('my-cart',{ template: ` <div> <cart-title></cart-title> <cart-list></cart-list> <cart-total></cart-total> </div> `, components: { 'cart-title': CartTitle, 'cart-list': CartList, 'cart-total': CartTotal } }); var vm = new Vue({ el: '#app', data: { } }); </script> </body> </html> fetch请求组件fetch
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>