第六章组件 62 组件-组件定义方式的复习

小咪咪 2021-11-04 11:44 267阅读 0赞

1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     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     
    10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
    11   </head>
    12 
    13   <body>
    14       <div id="app">
    15       
    16       <login></login>
    17       </div>
    18 
    19       <script>
    20       //定义组件的时候，如果要定义全局的组件，Vue.component('组件的名称',组件的模板对象)
    21 
    22       //通过对象 字面量的形式，定义了一个组件模板对象
    23       var login={
    24         template:'<h1>123456</h1>'
    25       }
    26       //通过 Vue.component 把组件模板对象，注册为一个全局的Vue组件，同时，为了这个组件起了一个名称，可以让我们同标签形式，在页面中直接引入这个组件
    27       // Vue.component('mylogin',login)
    28 
    29 
    30           //创建 Vue 实例，得到 ViewModel
    31           var vm =  new Vue({
    32               el:'#app',
    33         data:{
    34           msg:''
    35         },
    36         methods:{},
    37         components:{
    38           // '组件的名称':组件模板对象
    39           // 'mylogin':login
    40           login
    41         }
    42           });
    43       </script>
    44   </body>
    45 </html>

转载于:https://www.cnblogs.com/songsongblue/p/11001892.html