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 </head>
 9 <script src="vue.js"></script>
10 <body>
11     <div id="app">
12         <!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引用到页面中去，即可 -->
13         <!-- 注意使用规则   -->
14         <!-- // 注意：如果使用vue.componentd定义全局组件的时候，组件使用了驼峰命名，则在引用的时候，需要把大写的驼峰改为小写字母同时，
15         // 在两个单词之间用-链接；如果不使用驼峰，则直接拿名称来使用即可 -->
16         <my-com1></my-com1>
17         <!-- <myCom1></myCom1> -->
18     </div>
19     <script>
20         // 1.使用vue.extend来创建全局组件
21    var com1= Vue.extend({
22         template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
23     //   通过temolate属性；指定了组件要展示的html结构
24     })
25     // 返回一个模板对象
26     // 1.2使用vue.componnet('组件名称'，创建出来的组件模板对象);然后注册一个组件
27     Vue.component('myCom1',com1)
28     // 注意：如果使用vue.componentd定义全局组件的时候，组件使用了驼峰命名，则在引用的时候，需要把大写的驼峰改为小写字母同时，
29     // 在两个单词之间用-链接；如果不使用驼峰，则直接拿名称来使用即可
30     var vm=new Vue({
31         el:'#app',
32             data:{
33                 msg:'父组件中的数据123'
34             },
35     })
36     </script>
37 </body>
38 </html>

简写方式

 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 </head>
 9 <script src="vue.js"></script>
10 <body>
11     <div id="app">
12         <!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引用到页面中去，即可 -->
13         <!-- 注意使用规则   -->
14         <!-- // 注意：如果使用vue.componentd定义全局组件的时候，组件使用了驼峰命名，则在引用的时候，需要把大写的驼峰改为小写字母同时，
15         // 在两个单词之间用-链接；如果不使用驼峰，则直接拿名称来使用即可 -->
16         <my-com1></my-com1>
17         <!-- <myCom1></myCom1> -->
18     </div>
19     <script>
20         // 1.使用vue.extend来创建全局组件
21 //    var com1= Vue.extend({
22 //         template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
23 //     //   通过temolate属性；指定了组件要展示的html结构
24 //     })
25 //     // 返回一个模板对象
26 //     // 1.2使用vue.componnet('组件名称'，创建出来的组件模板对象);然后注册一个组件
27 //     Vue.component('myCom1',com1)
28 // 上面的写法可以简化为
29     Vue.component('myCom1',Vue.extend({
30         template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
31     //   通过temolate属性；指定了组件要展示的html结构
32     }))
33     // 注意：Vue.component第一个参数：组件的名称，将来在引用组件的时候，就是一个标签形式来引入它的
34     // 第二个参数是：Vue.extend创建的组件，其中tempalte就是组件将来要展示的html内容
35     var vm=new Vue({
36         el:'#app',
37             data:{
38                 msg:'父组件中的数据123'
39             },
40     })
41     </script>
42 </body>
43 </html>

View Code

组件的创建方式第二种方式

vue.component

 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="vue.js"> </script>
 9 </head>
10 <body>
11     <div id="app">
12         <!-- 还是使用标签的形式引用自己的组件 -->
13         <mycom2></mycom2>
14     </div>
15 <script>
16     Vue.component('mycom2',{
17         template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
18         // 注意：无论是哪种方式创建的组件，组件的tempalte属性指向的模板内容，必须有且只能有唯一的一个根元素
19     })
20     var vm=new Vue({
21         el:'#app'
22     })
23 
24 </script>
25 </body>
26 </html>

组件的创建方式第三种方式:把模板抽离出去的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"> </script>
</head>
<body>
    <div id="app">
        <mycom3></mycom3>
    </div>
    <!-- 注意：在被控制的#app外面，使用template元素，定义组件的html模板结构 -->
    <template id="temp1">
        <div>
            <h1>这是通过tempale元素，在外部定义的组件结构，这个方式，有代码的只能提示和高亮</h1>
            <span>好用，不错</span>
        </div>
    </template>
<script>
    Vue.component('mycom3',{
        template:'#temp1'
    })
    var vm=new Vue({
        el:'#app'
    })

</script>
</body>
</html>

注意：以上是全局组件的创建方式

 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="vue.js"> </script>
 9 </head>
10 <body>
11     <div id="app">
12         <mycom3></mycom3>
13     </div>
14     <div id="app2">
15         <mycom3></mycom3>
16     </div>
17     <!-- 注意：在被控制的#app外面，使用template元素，定义组件的html模板结构 -->
18     <template id="temp1">
19         <div>
20             <h1>这是通过tempale元素，在外部定义的组件结构，这个方式，有代码的只能提示和高亮</h1>
21             <span>好用，不错</span>
22         </div>
23     </template>
24 <script>
25     Vue.component('mycom3',{
26         template:'#temp1'
27     })
28     var vm=new Vue({
29         el:'#app'
30     })
31     var vm2=new Vue({
32         el:'#app2'
33     })
34 
35 </script>
36 </body>
37 </html>

下面来看下怎么定义局部组件

使用components定义私有组件

 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="vue.js"> </script>
 9 </head>
10 <body>
11     <div id="app">
12         <mycom2></mycom2>
13         <!-- <login></login> -->
14         <!-- 注释这里会报错，因为他是vm2实例的私有组件 -->
15     </div>
16     <div id="app2">
17             <mycom2></mycom2>
18             <login></login>
19         </div>
23 <script>
24 //   全局组件
25     Vue.component('mycom2',{
26         template:'<div><h1>这是直接用Vue.componet创建出来的全局组件</h1><span>123</span></div>'
27         // 注意：无论是哪种方式创建的组件，组件的tempalte属性指向的模板内容，必须有且只能有唯一的一个根元素
28     })
29     
30     var vm=new Vue({
31         el:'#app'
32     });
33     var vm2 =new Vue({
34         el:'#app2',
35         components:{
36             // 定义实例内部的私有组件
37             login:{
38                 // template:'#temp2'
39                 template:'<h1>这是私有的login组件</h1>'  
40             }
41         }
42     })
43 </script>
44 </body>
45 </html>

可以把私有组件的模板分离出去改写成这样

 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="vue.js"> </script>
 9 </head>
10 <body>
11     <div id="app">
12         <mycom2></mycom2>
13         <!-- <login></login> -->
14         <!-- 注释这里会报错，因为他是vm2实例的私有组件 -->
15     </div>
16     <div id="app2">
17             <mycom2></mycom2>
18             <login></login>
19         </div>
20     <template id="temp2">
21         <h1>这是私有的login组件</h1>
22     </template>
23 <script>
24 //   全局组件
25     Vue.component('mycom2',{
26         template:'<div><h1>这是直接用Vue.componet创建出来的全局组件</h1><span>123</span></div>'
27         // 注意：无论是哪种方式创建的组件，组件的tempalte属性指向的模板内容，必须有且只能有唯一的一个根元素
28     }) 
29  
30     var vm=new Vue({
31         el:'#app'
32     });
33     var vm2 =new Vue({
34         el:'#app2',
35         components:{
36             // 定义实例内部的私有组件
37             login:{
38                 template:'#temp2'
39                 // template:'<h1>这是私有的login组件</h1>'  
40             }
41         }
42     })
43 </script>
44 </body>
45 </html>