<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div class="container"> <my-cart></my-cart> </div> </div> <script type="text/javascript" src="./js/vue.js"></script> <script> var CartTitle = { template: ` <div class="title">我的商品</div> ` } var CartList = { template: ` <div> <div class="item"> <span>小米</span> <div class="name"></div> <div class="change"> <a href="">-</a> <input type="text" class="num"> <a href="">+</a> </div> <div class="del"></div> <div class="item"> <span>小米</span> <div class="name"></div> <div class="change"> <a href="">-</a> <input type="text" class="num"> <a href="">+</a> </div> <div class="del"></div> </div> <div class="item"> <span>小米</span> <div class="name"></div> <div class="change"> <a href="">-</a> <input type="text" class="num"> <a href="">+</a> </div> <div class="del"></div> </div> <div class="item"> <span>小米</span> <div class="name"></div> <div class="change"> <a href="">-</a> <input type="text" class="num"> <a href="">+</a> </div> <div class="del"></div> </div> <div class="item"> <span>小米</span> <div class="name"></div> <div class="change"> <a href="">-</a> <input type="text" class="num"> <a href="">+</a> </div> <div class="del"></div> </div> </div> </div> ` } var CartTotal = { template: ` <div class="total"> <span>总价123</span> <button>结算</button> </div> ` } Vue.component('my-cart', { template: ` <div class='cart'> <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>
