import React,{ useState,useEffect } from 'react';

const LikeBut = () => {
    const [like, setLike] = useState(0);
    const [on, setOn] = useState(true);
    useEffect(()=>{
        document.title = `点击了${like}次`
    })
    return(
        <div>
            <button onClick={()=>{setLike(like+1)}}>
                {like} @
            </button>
            <button onClick={()=>{setOn(!on)}}>
                {on?'on':'off'}
            </button>
        </div>
    )
}

export default LikeBut;

import React , {useState,useEffect} from 'react';

const Mouse = () => {
    const [ positions, setPositions ] = useState({x: 0, y: 0});

    useEffect(()=>{
        const updateMouse = (event)=>{
            console.log('inner')
            setPositions({x:event.clientX,y:event.clientY})
        }
        console.log('add listener')
        document.addEventListener('click',updateMouse);

        return ()=>{
            console.log('remove listener')
            document.removeEventListener('click',updateMouse)
        }
    })

    return(
        <p>X:{positions.x},Y:{positions.y}</p>
    )

}

export default Mouse;


// 打印顺数 
初始化时  add listener

点击后
inner
remove listener
add listener

useEffect(()=>{},[])
第二个参数可以被设置成触发条件

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15

所以不能用之前方式来判断 是否是 ipad 了
 
/iPad|iPhone|iPod/.test(navigator.platform)

<svg id="svg" :style="svgCss">
 <circle class="path" 
  stroke="hotpink" // 划线的颜色
  fill="none"  // 填充颜色
  stroke-width="1%" // 划线的宽度  可以使用百分比这是太棒了
  cx="50%" // 圆心X轴位置
  cy="50%" // 圆心Y轴位置
  r="49.5%" //圆的半径
 />
</svg>

stroke-dasharray: 360%; //展示比例
stroke-dashoffset: 360%; //绘画比例

/**
 *  本文件主要放各种sass的function或者mixin，可以直接在.vue中的sass使用
 */

/**
  * 主要是给border为0.5的时候使用的，当只有一条border或者border需要全部设置的画建议使用下面几个方法
  */
@mixin border-hack($color: #e7e7e7, $d1: none, $d2: none, $d3: none, $d4: none) {
  position: relative;
  &::after{
    content: '';
    transform: scale(0.5);
    position: absolute;
    left: -50%;
    right: -50%;
    top: -50%;
    bottom: -50%;
    @if($d1 == 'left' or $d2 == 'left' or $d3 == 'left' or $d4 == 'left'){
      border-left: 1PX solid $color;
    } 
    @if ($d1 == 'right' or $d2 == 'right' or $d3 == 'right' or $d4 == 'right') {
      border-right: 1PX solid $color;
    } 
    @if ($d1 == 'top' or $d2 == 'top' or $d3 == 'top' or $d4 == 'top') {
      border-top: 1PX solid $color;
    } 
    @if ($d1 == 'bottom' or $d2 == 'bottom' or $d3 == 'bottom' or $d4 == 'bottom') {
      border-bottom: 1PX solid $color;
    }
  }
}

@mixin border-hack-top($color: #e7e7e7) {
  @include border-hack($color, top);
}
@mixin border-hack-right($color: #e7e7e7) {
  @include border-hack($color, right);
}
@mixin border-hack-bottom($color: #e7e7e7) {
  @include border-hack($color, bottom);
}
@mixin border-hack-left($color: #e7e7e7) {
  @include border-hack($color, left);
}
@mixin border-hack-all($color: #e7e7e7) {
  @include border-hack($color, left, right, top, bottom);
}

.test{
  width: 100%;
  background: yellow;
  color: white;
  @include border-hack-all(red);
}

{
  "姓名": "张三",
  "角色": "管理员",
  "到期时间": "2018年7月1日0点0分"
}