Vue – Component 組件的分離範例
HTML
- <header> 包含使用者與購物車組件
- <footer> 僅包含使用者組件
|
1 2 3 4 5 6 7 8 9 10 |
<header> <c-user></c-user> <c-cart></c-cart> </header> <footer> <c-user></c-user> </footer> |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var cUser = { template: '<h1>Jason</h1>' } var cCart = { template: '<ol><li>Apple</li><li>Coffee</li></ol>' } new Vue({ el: 'header', components: { 'c-user': cUser, 'c-cart': cCart } }) new Vue({ el: 'footer', components: { 'c-user': cUser } }) |