一、组件component

1、什么是组件

组件是vue。js最强大的功能之一，组件可以扩展html元素，封装可重用的代码。组件就是自定义的元素，组件也是自定义的对象。

 

2、如何自定义组件？

方式1：使用组件构造器定义组件（太麻烦，不推荐使用）

先使用Vue.extend创造组件构造器，由组件构造器使用Vue.component创建组件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>定义组件</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 <body>
10 
11     <div id="hello">
12         <hello></hello>        
13     </div>
14 
15     <script>
16         //自定义组件 方式1：使用组件构造器定义组件
17 
18         //第一步：使用Vue.extend创建组件构造器
19         var MyComponent=Vue.extend({
20             template:'<h3>HelloWorld</h3>'
21         })
22         //第二步：使用Vue.component创建组件
23         Vue.component('hello',MyComponent)
24 
25         //vue实例
26         let vm = new Vue({
27             el:'#hello',
28             data:{
29                 
30             },
31         });
32     </script>
33 </body>
34 </html>

 

方式2：直接创建组件（常用，推荐使用）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>定义组件</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 <body>
10 
11     <div id="hello">      
13         <yaya></yaya>        
14     </div>
15 
16     <script>
26         //自定义组件 方式2：直接创建组件
27         Vue.component('yaya',{
28             template:'<h2>yaya是个小可爱</h2>'
29         })
30         //vue实例
31         let vm = new Vue({
32             el:'#hello',36         });
37     </script>
38 </body>
39 </html>