Vue--公有组件以及组件的使用和特点

组件的作用：为了能够让功能与功能之间互不影响，使代码更加清晰整洁
 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="../vue2.4.4.js"></script>
 9 </head>
10 
11 <body>
12 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
13 <div id="app">
14     <!-- <login></login> -->
15 
16     <template id="tlogin">
17         <div>
18             用户名: <input type="text">
19             密码： <input type="text">
20         </div>
21     </template> 
22 
23     <!--<script type="x-template" id="tlogin">
24             <div>
25                     用户名: <input type="text">
26                     密a码： <input type="text">
27             </div>
28         </script>-->
29 </div>
30 
31 
32 </body>
33 
34 <script>
35     //公有组件
36     //注意:
37     // 1.所有的模板代码都必须要有一个根标签
38     // 2.如果组件的名称如果首字母大写
39         // a.所有的字母全部小写
40         // b.如果首字母和内部如果也有大写将大写字母改为小写并且在这个字母之前加上一个"-"
41             //UserName  -> user-name 
42 
43     // 1.0将组件的定义与组成分两步来执行
44     // 定义：
45     // Vue.extend({
46     //     template:"组件的html代码"
47     // });
48     /*var login = Vue.extend({
49         template:"<h1>我是login</h1>"
50     });
51     // 注册：
52     // 参数一： 当前组成组件的名称
53     // 参数二： 组件对象
54     //Vue.component("login",login); // 向Vue中注册组件
55     Vue.component("login",login);
56    */
57 
58    //2.0组件的定义和组成一步到位
59    // 使用组件时候，一定要给组件一定要加上根标签 否则会报编译错误
60     /*Vue.component("login",{
61        template:"<h1>login</h1>"
62    });*/
63    
64    // 以上两种写template麻烦
65    //3.0组件的使用三 （！！！常用）
66    Vue.component("login",{
67        template:"#tlogin"
68    });
69 
70    //4.0 组件的使用四（了解即可）
71 //    Vue.component("login",{
72 //         template:"#tlogin"
73 //    });
74 
75 
76     // 实例化vue对象（MVVM中的View Model）
77     new Vue({
78         // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
79         el:'#app',
80         data:{
81         // 数据 （MVVM中的Model）   
82         },
83         methods:{
84             
85         }
86     })
87 </script>
88 </html>
Vue--公有组件以及组件的使用和特点

猜你喜欢
