vue 组件

定义vue 组件

什么是组件？

组件的出现就是为了拆分代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能模块，就可以去调用对应的组件即可。

组件化和模块化的不同：

• 模块化：模块化是从代码的逻辑角度进行划分的
• 组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的复用

创建组件

1. 创建组件方式一

var con1 = Vue.extend({
    template: '<h1>这里使用vue.extend 创建的组件</h1>'
})

/*
    使用Vue.component('组件的名称','创建出来的组件模板对象')
    把组件注册为全局组件
*/
Vue.component('myComponent', con1)

/*
    页面中使用组件，这里的组件不能使用驼峰的形式，因为html对大小写不敏感
    Vue.component('myComponent', con1) 中使用驼峰的命名方式，那么在html页面中，两个单词之间需要使用-进行连接
*/
<my-component></my-component>

2. 创建组件方式二

/*
    注意：无论是哪种方式创建出来的组件，组件的template 属性指向的是模板内容，必须有且只能有一个跟元素
*/
Vue.component('myCom1',{
    template: '<div>
        <h3>这里是vue.compoent 创建出来的组件<span>123</span></h3>
    </div>'
})

3. 创建组件方式三

Vue.component('myCom2',{
    template: '#templa'
})

<template id="templa">
    <div>
        <h3>这里是在template的外面创建组件的方法</h3>
    </div>
</template>