1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="./lib/vue.js"></script>
    10. </head>
    12. <body>
    13.     <!-- mytep定义 -->
    14.     <template id="mytmp">
    15.         <div>
    16.             <h1>这是使用template创建出来的组件,有提示和语法功能</h1>
    17.             <h3>不错,非常好用</h3>
    18.         </div>
    19.     </template>
    21.     <template id="tmplogin">
    22.         <h2>tmplogin这是一个登陆组件</h2>
    23.     </template>
    25.     <div id="app">
    26.         <!-- 调用组件 -->
    27.         <mycom3></mycom3>
    28.     </div>
    31.     <div id="app2">
    32.         <!-- 调用组件 -->
    33.         <mycom3></mycom3>
    34.         <login></login>
    35.     </div>
    37.     <script>
    38.         Vue.component('mycom3', {
    39.             // 组件使用一个定义了一个id为mytmp
    40.             template: "#mytmp"
    41.         })
    43.         var vm = new Vue({
    44.             el: '#app',
    45.             data: {},
    46.             methods: {}
    47.         });
    49.         var vm2 = new Vue({
    50.             el: '#app2',
    51.             data: {},
    52.             methods: {},
    53.             // 在vm2中定义一个私有组件
    54.             components:{
    55.                 login:{
    56.                     // template: '<span>这是登陆模块</span>'
    57.                     template: '#tmplogin'
    58.                 }
    59.             }
    60.         });
    61.     </script>
    62. </body>
    64. </html>

    image.png