组件化

1.1 什么是组件？

组件 component 就是网页的零部件，一个网页的一个部分就是一个组件，可以由多人开始同一个网页的各种组件

1.2 单文件组件

一个 ***.vue 文件就是一个单文件组件，由三个部分组成 <tempalte> <script> <style>

HelloWorld.vue

<template>
    ....html模板...
    注意：有且只能有一个根标签
</template>

<script>
    ...js逻辑...
</script>

<style>
    ...css样式...
</style>

1.3 使用自定义组件

第一步：引入子组件

import MyButton from '组件路径'

第二步：注册子组件

export default {
    //2. 注册子组件
    components:{
        MyButton,
    }
}

第三步：使用子组件

<!-- 3.使用子组件，两种方式都可以 -->
<MyButton></MyButton>
<my-button></my-button>