个人练手项目（二）

今天开始页面编写

底部导航组件

1.首先在components下新建Footer.vue

2.这里有一个坑，i图标无法在for循环里面显示，原因：

1.{{ }} 将元素当成纯文本输出

2.v-text 将元素当成纯文本输出

3.v-html 将元素当成HTML标签解析后输出

解决方法：

    <i class="iconfont" v-html="item.icon"></i>
复制代码

3.样式 布局

display: flex;
align-items: center; // 上下居中
justify-content: space-around;
复制代码

4.父子组件之间传参

1.父组件传递参数给子组件

<Footer :page="page"></Footer>

2.子组件接受参数，设置默认值和参数类型

props:{
	page: {
		type: String,
		default: 'index'
	}
},
复制代码

5.使用router-link达到页面跳转

<router-link :to="{name:item.name}"></router-link>

6.router-link会被解析出a标签，a标签会有一些样式问题

a标签四个伪类按link、visited、hover、active顺序编写样式

理由：

第一：不管什么情况下鼠标悬停都应该有一个样式变化（:hover）,我们就把hover放在最后，防止具备其他状态时，被其他状态的设置覆盖掉。

第二：当a被激活时(:active)，我们要求不管是否访问过，都应该有相同的样式，也就是这个状态的效果应该能够覆盖未被访问时(:link)与 已访问过(:visited)两种状态。应该放在 :link :hover的后面。

第三：被访问过的a（:visited）可能会有不一样的样式属性，用来区别a是否被访问过。也就是说:visited 状态的属性可以覆盖掉:link状态的属性， 即 :visited 要放在 :link 的后面。

分类组件

传递给这个组件是一个数组，所以要进行一些处理，才能为我们所用

这里是用了element-ui中走马灯组件

element.eleme.io/#/zh-CN/com…