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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Document</title>
    8. <script src="./lib/vue.js"></script>
    9. </head>
    10. <body>
    11. <!-- mytep定义 -->
    12. <template id="mytmp">
    13. <div>
    14. <h1>这是使用template创建出来的组件,有提示和语法功能</h1>
    15. <h3>不错,非常好用</h3>
    16. </div>
    17. </template>
    18. <div id="app">
    19. <!-- 调用组件 -->
    20. <mycom3></mycom3>
    21. </div>
    22. <script>
    23. Vue.component('mycom3', {
    24. // 组件使用一个定义了一个id为mytmp
    25. template: "#mytmp"
    26. })
    27. var vm = new Vue({
    28. el: '#app',
    29. data: {},
    30. methods: {}
    31. });
    32. </script>
    33. </body>
    34. </html>

    image.png