16_components模版结构.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script src="./js/vue.js"></script>
  8. <style>
  9. .box {
  10. width: 100px;
  11. height: 100px;
  12. background-color: red;
  13. margin: 10px;
  14. }
  15. .box2 {
  16. width: 100px;
  17. height: 100px;
  18. background-color: blue;
  19. margin: 10px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div id="app">
  25. <box></box>
  26. </div>
  27. <script>
  28. let app = new Vue({
  29. el: '#app',
  30. data: {
  31. },
  32. components: {
  33. box: {
  34. template: `
  35. <div class="container">
  36. <div class="box">
  37. <span>hello world</span>
  38. </div>
  39. <div class="box2"></div>
  40. </div>
  41. `
  42. }
  43. }
  44. })
  45. </script>
  46. </body>
  47. </html>