今天完成的事情：

今天上午又重新修改了一下禅道，昨天晚上写的还是不行，早上在此重新编译了：

89前台课程 点击叉号跳转课程首页

上次师兄说的没有考虑到数据传递的问题，这次我仔细的想了一遍，总算是修改的差不多了，然后开始在禅道那里登记，第一次登记的还是蛮快的，大家都登记完了，然后今天开始写了一点页面，本来是打算一遍就把样式写好的，但是后来考虑到可能会修改样式，所以就打算先把样式写个大概，后来再细细的修改，遇到的还是element-ui中样式修改的问题，还是没弄清楚怎么修改比较好，如果把scoped去掉的话那他自带的样式也会消失，但是还有另外两种办法：

在用vue开发项目过程中，我们总是避免不了的会使用到elementUI，它里面提供的一些组件都为我们的开发带来了很大的便利，但是，当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话，我们该怎么去做呢？接下来我们来看下。

　　如上图所示，elementUI的多选框是方框的，那么如果我们需要一个圆形的选择框的话，怎么办呢，这个时候我们第一时间想到的应该就是border-radius:50%;但是怎么往上加呢，我们接下来看一看

　　首先，我们需要选中要改变样式的组件，然后鼠标右键检查元素，找到该组件的类名，然后在style里面直接将该类名的样式进行修改就可以了，代码如下：

<style>   .el-checkbox__inner {   // 对应的组件的类名   　　border-radius: 50%;   } </style>

　　上面的这个方法已经可以改变组件的样式了，但是这里存在一个问题，在style里面改变的样式是全局的，也就是说，如果我们在其他页面里面也用到了这个组件的话，其他页面的样式也会被我们改变，显然这不是我们想要的，那么我们如何做到只改变相应的页面里面的组件样式呢？这时候我们就需要用到scoped这个属性了。

　　那么scoped的作用是什么呢？scoped是Vue里面style标签的一个特殊属性，当一个style标签拥有scoped属性的时候，就相当于说明它里面的样式只作用于当前这个Vue页面，不会污染到全局的样式，从而实现了组件样式的模块化，那么它是怎么实现的呢？其实如果我们给style标签加上了scoped属性，在编译的时候，他会给我们组件里面的每一个样式加一个自定义的属性data-v-5558821a,从而通过给含有这个自定义属性的标签加上样式，从而实现了部分样式的穿透。所以我们只需要这样：

<style scoped>
.edit_dev >>> .el-checkbox__inner { // 这里我们要注意，想要修改组件样式的话，必须先用一个原生标签将这个组件包起来，然后通过父查子的方式来找到组件的类，注意这里的>>>是不可少的，要通过这个来查找   　border-radius: 50%;   } </style>

　　当然这里还有另外一个方法，就是通过less以及sass的方式来实现穿透，代码如下：

<style scoped> 　.edit_dev {
　　/deep/ .el-checkbox__inner{  // less语法要通过/deep/ 来找到子级的类
　　　border-radius: 50%;
　　}
　} </style>

　　以上三种方法都是可以实现改变element组件样式的，明天再熟悉熟悉。

明天计划的事情：

明天把课程的首页写完。

收获：

熟悉了element-ui中样式的修改以及禅道拆分。