18.组件.html 815 B

123456789101112131415161718192021222324252627282930313233343536373839
  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. </head>
  8. <body>
  9. <div id="app">
  10. <my-com></my-com>
  11. <hi></hi>
  12. </div>
  13. <script src="./vue.js"></script>
  14. <script>
  15. Vue.component("my-com",{
  16. template: `<h1>你好</h1>`
  17. })
  18. const news = Vue.extend({
  19. template: `<ul>
  20. <li>111</li>
  21. <li>222</li>
  22. 3 <li>333</li>
  23. </ul>`
  24. })
  25. var app = new Vue({
  26. el:"#app",
  27. data:{
  28. },
  29. components:{
  30. hi:news
  31. }
  32. })
  33. /**
  34. * 全局组件
  35. * 局部组件
  36. */
  37. </script>
  38. </body>
  39. </html>