找工作学习第五天

发现空白边距，直接在浏览器调整，

调整为0之后

 

main.js和App.vue的作用：

 

css属性名称涉及到两个单词的，中间就是横杠

 

一般图标数据或者其他数据显示不出来，就是没加冒号绑定，data中的数据传不到页面中

 

 computed和method都是：{}的书写形式，couputed对现有的数据进行计算然后返回，实际上也是函数，两者可以统一书写形式，方便记忆

 

el-menu中的index不是没有作用的，组件内部会根据index的值知道你鼠标点击了哪一行菜单

 

对于dom的理解

 

 

&& !(this.$route.path == '/home' && item.path == '/')

首先我们这个函数是为了解决相同路由跳转问题：如果/home跳转到/home，这就会导致报错

加入点击路由跳转函数时候，当前页面是home，目标页面是/,  点击跳转就会重定向到home,实际上还是同样页面跳转到同样页面，这就会导致相同页面跳转问题

需要取非排除掉，&& 加上！就是排除这种情况

 

 

以下是样式部分学习：

两个菜单有两个对应代码但是自定义颜色部分加了这几行，就有了背景

 分别是背景颜色，文本颜色，点击选中文本展示的颜色

 

侧边栏没有占满整个页面部分 ，需要调整高度（使用less可以进行嵌套，不需要大费周章的获取某一个class）

el-menu设置行高为100vh

可以看到左侧和上方都有一部分边距空白，这是html，body默认样式，需要在app。vue中清除，加了.html,body{margin:0}之后样式就变为

可以看到字体没有居中，使用less样式，效果为

 

 header左右不分都有边距，网页查看元素的到，有padding，这个padding的意思是上下padding为0，左右边距为20px，那么搜索可以得到el-header在main。app中。可以设置paddin，得到

 

 

 

 flex可以让元素垂直居中（align-items），水平方向显示在两侧就用justify-content：sapce-around

 

元素顶在最左边不好看，可以往中间挪动一下，这就可以设置padding：0 20px 这就是上下没有padding 左右都有20px，实际效果如图，往中间靠了靠

 

这个效果是个下拉框，用一个图片代替下拉的i标签，i标签定义文本