面试记录1

Vue里面v-if和v-show的区别：

v-show 通过css样式中的dispaly：none；控制元素显示、隐藏
v-if 通过控制vue的虚拟dom树上的节点，来联动控制真实dom上的节点，从而控制元素的显示、隐藏。很多人认为是控制真实dom树上的节点，来显示隐藏，其实不完全对；而是间接的控制，v-if直接控制的是vue生成的虚拟dom树，当虚拟dom树上的节点被删除时，vue的响应系统会实时的删除对应的真实dom树上的节点；从而控制元素的显隐
频繁地切换用v-show，反之用v-if

Vue实现兄弟节点之间的通信 – 学习vue

  1. 一种方法是让父组件允当两个子组件之间的中间件
  2. 使用EventBus（事件总线），它允许两个字组件之间直接通讯，而不需要涉及父组件

css实现一个圆形点击事件

方法一：通过map加area
标签中的 usemap 属性将图像定义为客户端图像映射。图像映射指的是带有可点击区域的图像。usemap 属性与

<img src="images/lanlvseImg.png" usemap="#Map" />  
<map name="Map" id="Map">
        <area shape="circle" coords="100,100,50" href="http://www.baidu.com" target="_blank"/>
</map>

方法二：border-radius (css3)
设置div的border-radius:50%。

<div id="circle"></div>
#circle{
 background:red;
 width:100px;
 height:100px;
 border-radius:50%;
}

方法三：
JS实现，获取鼠标点击位置坐标，判断其到圆点的距离是否不大于圆的半径，来判断点击位置是否在圆内。
两点之间的距离计算公式： |AB| = Math.abs(Math.sqrt(Math.pow(X2-X1), 2) + Math.pow(Y2-Y1, 2)))
Math.abs()求绝对值，Math.pow(底数,指数)，Math.sqrt()求平方根

// 获取目标元素
var box = document.getElementById('box');
// 对目标元素target的圆形区域进行一个点击事件绑定
function bindClickOnCircleArea(target, callback) {
 target.onclick = function (e) {
 e = e || window.event;
 // target中心点的坐标
var x1 = 100;
var y1 = 100;

// 事件源坐标
var x2 = e.offsetX;
var y2 = e.offsetY;

// 校验是否在圆形点击区，在的话就执行callback回调
// 计算事件触发点与target中心的位置
var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
// 通过半径进行校验
if (len <= 100) {
  callback();
} else {
  alert('在外面');
}
}
}
// 执行
bindClickOnCircleArea(box, function () {
 alert('找到了');
});

css实现圆环

参考链接

1. 两个标签的嵌套：

<div class="element1">
    <div class="child1"></div>
</div>

.element1{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
.child1{
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background-color: #009966;
   position: relative;
   top: 50px;
   left: 50px;
}

2. 使用伪元素，before／after

<div class="element2"></div>

.element2{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
.element2:after{
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #009966;
    position: relative;
    top: 50px;
    left: 50px;
}

3. 使用border:

<div class="element3"></div>

.element3{
           width: 100px;
           height: 100px;
           background-color: #009966;
           border-radius: 50%;
           border: 50px solid lightpink ;
       }

4. 使用border-shadow

<div class="element4"></div>
.element4{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink ;
            margin: auto;
        }
<div class="element5">
.element5{
          width: 200px;
          height: 200px;
          background-color: #009966;
          border-radius: 50%;
          box-shadow: 0 0 0 50px lightpink inset;
          margin: auto;
      }

box-shadow:
h-shadow v-shadow blur spread color inset;
注意：boxShadow
属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset关键字来规定。省略长度的值是 0。

1. h-shadow 必需的。水平阴影的位置。允许负值
2. v-shadow 必需的。垂直阴影的位置。允许负值
3. blur 可选。模糊距离
4. spread 可选。阴影的大小
5. color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

5. 使用radial-gradient

<div class="element6"></div>
.element6{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);
        }

background-image: radial-gradient(shape size at position, start-color,…, last-color);

1. shape 确定圆的类型: ellipse (默认): 指定椭圆形的径向渐变。 circle：指定圆形的径向渐变
2. size 定义渐变的大小，可能值： farthest-corner (默认) :指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
3. closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
4. position 定义渐变的位置。可能值: center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。bottom：设置底部为径向渐变圆心的纵坐标值。
5. start-color, …, last-color 用于指定渐变的起止颜色。