11、组件入门及写个首页头部组件

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

1、官方解读

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

（2）关于组件的命名

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

（3）组件的复用

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

（4）其它

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

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

（1）新建一个myHeader头部组件

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

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

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

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

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

（2）组件的引入

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

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

怎么引入的？import照着上图引入然后components属性里面注册一下，我这里讲下命名规范，import后面请使用首字母大写的形式MyHeader，template里面使用的时候用短横线连接法my-header 。

（3）组件的复用

组件的复用就很简单了，写复制粘贴一下就行，记住，组件都是独立的。

（4）最后我们在回到第（1）点下面关于组件里面的name属性具体体现在哪里的问题
  我们打开vue的插件，name属性的值就是组件的名字，你可以自己修改name属性看看效果：

3、然后，我修改myHeader.vue组件里面得内容，这就是我们的头部

加点样式：

4、题外话

（1）我有想了一会儿，到底这个小商场项目的场景是面向pc端还是手机端的运用呢？最后我觉得还是紧跟时代潮流，做成移动端的商场，有点webApp的意思，我觉得这样更具有实际意义，所以，以后看页面按完F12后请选取手机调试模式【抱拳】；

（2）里面很多小问题但也很重要的，比如import ... from后面为什么用@的问题，越到后面我就不会写的很细了，因为篇幅和文章侧重点的问题，所以，大家多培养自己自学google能力，也欢迎留言；

（3）如果有本章相关知识的学习链接欢迎留言分享，开源和分享精神我觉得是很重要的，感谢。

【原创首发于慕课网】

参考链接
https://cn.vuejs.org/v2/guide/components.html