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

前言：说下vue终端的组件组件，然后搭个头部组件实现复用。
GitHub：https://github.com/Ewall1106/mall

官方解读

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

官网说明

• 关于组件的命名
  组件的命名我在项目中统一用驼峰式来表示。

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

组件复用

组件的运用

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

myHeader.vue

• 仔细看看上图，一个myHeader.vue的页面分为了三个部分：
  • 里面是放html代码的是为结构
  • 里面写js是为逻辑
  • 里些css是为样式，这就是vue里面的结构、样式、逻辑三者分离。

组件的引入

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

往myHeader里面添加内容

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

home.vue

组件的复用

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

组件复用

浏览器中展示