11.Vue组件以及项目头部的编写

前言：项目准备工作说了很久，不知道大家学会了没有？今天开始我们开始正式搭建页面，先从首页开始，在搭建页面的过程中，我也会将vue的知识点在其中穿插讲解，但是你最好是提前看看官方文档。ok，今天我们来讲下组件，然后搭个头部组件实现复用；

1、官方解读

（1）官方怎么说的啊？组件可以扩展HTML元素，封装可重用的代码，这句话中，记住可重用这几个字是很重要的，一般来说这就是答案——即到底什么时候应该把一部分的代码抽离出来构成组件？

image

（2）关于组件的命名
组件的命名我在项目中统一用kebab-case （短横线）表示：

image

（3）组件的复用
可以将组件进行任意次数的复用，举个栗子如下图，每次点击按钮，每个组件都会各自独自维护它的count；因为每用一次组件，就会有一个它的新实例被创建。

image

（4）其它
还有很多关于组件使用的很重要的内容，如组件之间数据的传递，组件的事件等等，我们后面在项目中具体用到了再穿插。

2、组件的运用-创建头部组件

（1）新建一个myHeader头部组件
ok，我们进入components文件夹里面新建一个myHeader.vue组件，有helloworld.vue的删掉或者直接改个名直接用都是可以的，好了，代码敲完了以后变成了这幅模样：

仔细看看上图，一个myHeader.vue的页面分为了三个部分，<template></template>里面是放html代码的是为结构，<script></script>里面写js是为逻辑，<style></style>里些css是为样式，这就是vue里面的结构、样式、逻辑三者分离，我就不多说了，里面我序号标记了几个小要点，我说道一下：

• 这个name大家应该明白，就是对这个组件的命名，具体表现在哪里，卖个关子，我们待会讲；

• data标记出来的意思就是记得data必须函数；

• 第3点就是style里面这里有个scoped，其实上面注释已经讲得很清楚了，我佛系翻译一下就是你加了css就只会作用于这个组件、这个页面，不会污染。

（2）组件的引入

• ok，我们在div里面加个helloworld便于展示：

• 然后在home.vue里面引入: