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

 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     <!--1.导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
11   </head>
12 
13   <body>
14       <div id="app">
15       <!-- <mylogin></mylogin> -->
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>

posted on 2019-06-11 09:32 songsong_p_blue 阅读(276) 评论(0) 收藏举报

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

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