5.20 Object.defineProperty()方法，原生Scroll获取滚动条属性，@media简单写法，keep-alive只能包裹一层路由标签，进度条bcg实现，filter模糊背景

1、VUE实现双向绑定重要的底层api,Object.defineProperty()

// 在script标签中
  var objVue = {}
  Object.defineProperty(objVue, "userName", {
    get: function () {
      console.log("get init!")
    },
    set: function (val) {
      console.log("set init!")
      document.getElementById('uName').innerText = `双向绑定:${val}`
    }
  })
  document.getElementById('userName').addEventListener('keyup', function (e) {
    // 操纵真实dom修改
    // document.getElementById('uName').innerText = e.target.value
    // 调用set修改
    objVue.userName = e.target.value
  })

运行结果如下：当修改，或者读取objVue的值

不明觉厉！

2、原生Scroll即页面自带的scroll滚动条属性。
document.documentElement.scrollTop || document.body.scrollTop 是获取滚动条距顶部偏移
document.documentElement.scrollHeight || document.body.scrollHeight 是获取滚动高度（默认是body的高度）

3、@media是pc端自适应重点。本人未使用，先记录以后翻阅。

// CSS 文件中，当浏览器宽度小于1240px时执行。body最小缩减宽度至600px。
@media (max-width: 1240px)
body {
    min-width: 600px;
}

4、keep-alive可以缓存页面，让页面不重新渲染，多数配合页面过渡动画标签。但是keep-alive只能作用路由标签，是个包裹层。

错误写法：X

   <keep-alive>
      <transition name="opac">  X
        <router-view></router-view>
      </transition> X
    </keep-alive>

正确写法：√

    <transition name="opac">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>

5、进度条功能，通常通过构建父子层级div，子层div根据进度百分控制颜色宽度。代码如下

 .progress-bar
    height: 30px
    .bar-inner
      position: relative
      top: 13px
      height: 4px
      background: rgba(0, 0, 0, .3) // 父层颜色width:100%
      .progress
        position: absolute
        height: 100%
        background: $color-theme // 子层颜色 width: $percent决定

更为简洁的一种就是一层div直接渲染出2种颜色。通过background控制

      .mini-player-progress-bar
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 2px
        background: linear-gradient(#999, #999) no-repeat, #ddd // 核心代码 进度颜色2种
        background-size: 20% 100% // 核心代码 进度颜色百分比

6、filter是CSS3带的滤镜功能，自行文档。图片高斯模糊写法如下

// html内
<div class="background">
   <img width="100%" height="100%" :src="currentSong.image">
</div>

// css内
    .background
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        z-index: -1
        opacity: 0.6
        filter: blur(20px) // 核心代码