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>
组件的创建方式第二种方式
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>