十二、定义组件

一、组件component

1.什么是组件?

    组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。  
    组件是自定义元素（对象）

2.定义组件的方式

   方式1：先创建组件构造器，然后由组件构造器创建组件。（不常用）

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>定义组件的两种方式</title>
   <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
   <div id="itany">
       <hello></hello>
   </div>
</body>
<script type="text/javascript">
   // 1.使用Vue.extend()创建一个组件构造器
   var MyComponent = Vue.extend({
       template:"<h3>hello world</h3>"
   })
   // 2.使用Vue.component(标签名,组件构造器)根据组件构造器来创建组件
   Vue.component('hello',MyComponent);

   new Vue({
       el:'#itany'
   })
</script>
</html>

方式2:直接创建组件

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>定义组件的两种方式</title>
   <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
   <div id="itany">
       <hello></hello>
       <world></world>
   </div>
</body>
<script type="text/javascript">
   // 1.使用Vue.extend()创建一个组件构造器
   var MyComponent = Vue.extend({
       template:"<h3>hello world</h3>"
   })
   // 2.使用Vue.component(标签名,组件构造器)根据组件构造器来创建组件
   Vue.component('hello',MyComponent);
   // 方式2：直接创建组件
   Vue.component('world',{
       template:'<h1>你好，世界</h1>'
   })
   new Vue({ //这是一个跟组件
       el:'#itany'
   })
</script>
</html>

十二、定义组件

一、组件component

1.什么是组件?

2.定义组件的方式

推荐阅读更多精彩内容