今天开始页面编写
底部导航组件
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 的后面。