Vue定义组件的方式

一、组件component

1、什么是组件？

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

2. 定义组件的方式

方式1：先创建组件构造器，然后由组件构造器创建组件

<div id="itany">
    <hello></hello>
</div>
/**
 * 方式1：先创建组件构造器，然后由组件构造器创建组件
 */
//1.使用Vue.extend()创建一个组件构造器
var MyComponent = Vue.extend({
    template: '<h3>Hello World</h3>'
});
//2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件
Vue.component('hello', MyComponent);
var vm = new Vue({ //这里的vm也是一个组件，称为根组件Root
    el: '#itany',
    data: {
        msg: 'hello'
    }
});

方式2：直接创建组件

<div id="itany">
    <my-world></my-world>
</div>
/**
 * 方式2：直接创建组件(推荐)
 */
// Vue.component('world',{
Vue.component('my-world', {
    template: '<h1>你好，世界</h1>'
});