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>
