1、认识vue组件
组件是 vue 最基础、最常用的功能
vue 组件化就是把页面分割成不同模块，每个模块视为一个组件，每个组件包含三部分：内容（模板代码）、功能（js代码）、样式（css 代码，less 等需要构建工具支撑）。
开发组件三步骤：
⑴ 创建组件
⑵ 注册组件（全局注册、局部注册）
⑶ 应用组件
提示：在使用 Vue 组件，建议先理解 ES6 的箭头函数、模块化等基础知识。
2、创建组件
每个 .vue 文件即可视作一个组件，每个组件由 3 部分构成，如下：（注意：每个组件必须包含 template 模板结构，缺失此部分启动 vue 时会报错，而 script 行为和 style 样式是可选的组成部分）
template: 组件的模板结构
script: 组件的 javascript 行为
style: 组件的样式
导出组件：（省去此部分 vue 也能正常运行，但缺失 name 属性后，可能出现不可预期的错误）
<script>
export default{
name: 'Swiper',
props: [],
methods: {}
}
</script>
常用的组件配置对象：
export default {
//返回数据
data(){
return {
//变量
}
},
computed: {
//计算属性
},
methods: {
//方法
},
template: `...模板`,
render(m){ ... }
}
3、组件命名
官方推荐的两种组件命名法：
⑴ PascalCase 命名法，俗称帕斯卡命名或大驼峰命名法，比如：MyTitle
⑵ kebab-case 命令法，俗称短横线命名法，比如：my-title
用大驼峰命名后，使用组件时既可以使用驼峰式，也可使用短横线式，比较灵活，实际卡法中推荐使用。
4、注册组件
注册组件分为局部注册和全局注册。一些组件在开发期间的使用频率很高，推荐进行全局注册。其它大部分场景不建议使用全局注册，因为使用构建工具时，可能会导致工具无法优化打包，影响打包结果，一般情况是组件在哪里用，就在哪里注册。
⑴ 局部注册：在 Vue 实例中，使用 import 引入组件，然后使用 components 注册（速写属性即可）
比如定义一个组件 Title，在 Vue 配置中局部注册：
<template>
<title></title>
</template>
<script>
import Title from '../Title.vue'
export default ({
components: {Title}
});
</script>
⑵ 全局注册：全局注册的组件，整个应用中任何地方都可以使用（包括 Vue 实例中，其它组件中）
编辑 src 目录下的 main.js，添加如下代码进行组件全局注册
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 1. 导入组件
import Swiper from './components/Swiper.vue';
// 2. 调用 app 实例的 component() 方法，在全局注册 my-swiper 组件
app.component('my-swiper', Swiper);
app.mount("#app");
使用全局注册的组件，任意的 .vue 文件中都可直接使用
<template>
<my-swiper></my-swiper>
</template>
注意：组件之间可以相互使用，没有注册的组件不能使用
5、应用组件：
把注册的组件当成一个元素来用，有两种写法，“<组件名/>” 和 “<组件名></组件名>”
比如使用大驼峰命名法注册了一个全局组件：
app.component("MyTitle", title);
使用方法：
<MyTitle /> //写法一
<MyTitle></MyTitle> //写法二
<my-title /> //写法三
<my-title></my-title> //写法四
</template>
6、组件封装原则
为了提高组件的复用性，在封装 vue 组件时需要遵守如下的原则
组件的 DOM 结构、style 样式要尽量复用
组件中要展示的数据，尽量由组件的使用者提供
7、template中的根节点
在 vue2.x 的版本中，<template> 节点内的 DOM 结构仅支持单个根节点：
<template>
<!-- 在vue2.x中，template节点内的所有元素，最外层必须有唯一的根节点进行包裹，否则报错-->
<div>
<h1>这是标题</h1>
<h2>这是副标题</h2>
</div>
</template>
在 vue3.x 的版本中，<template> 中支持定义多个根节点：
<template>
<!-- 这是包含多个根节点的template结构，因为h1标签和h2标签外层没有包裹性质的根元素 -->
<h1>这是标题</h1>
<h2>这是副标题</h2>
</template>
8、组件中可以使用的指令
组件内的属性也可以被提取到Vue实例中，因此在组件内可以通过 {{属性名}} 直接使用
在组件的 template 节点中使用指令，支持常用的 vue 指令语法，来辅助开发者渲染当前的 dom 结构，比如：
<template>
<!-- 使用 {{}} 插值表达式 -->
<p>生成随机数：{{ (Math.random() * 10).toFixed(2) }}</p>
<!-- 使用 v-bind 属性绑定-->
<p :title="new Date().toLocaleTimeString()">生成日期</p>
<!-- 属性 v-on 事件绑定-->
<button @click="showInfo">显示</button>
</template>
9、在浏览器中调试vue
在 Chorm 浏览器中安装 vue 插件，通过插件即可查看组件信息
15601023311
