vue小项目总结1

总结今天写vue小项目总结

链接：参考VUE文档原文

vue实例中我修改data.msg属性，再去页面获取div中的textContent，会发现数据并未修改，还是上一个值，原因在于DOM渲染是异步更新的，如果我们一定要获取div当前的值呢？（组件中）
解决：

  

  export default {
    data() {
      return {
          msg:'old msg'
      }
    }
    methods:{
        changeMsg(){
            this.msg = 'new msg';
            this.$el.textContent === 'new msg' // false
            // 使用nextTick函数 DOM更新后触发该函数回调函数
            this.$nextTick(()=>{
                this.$el.textContent === 'new msg' // true
            });
        }
    }
  }

---

CSS DIV背景图阴影效果

blur 模糊效果
brightness 高亮 ，>100 变亮 <100 变暗

.shadow{
            position: absolute;
            background: url("../assets/icon/light.png") no-repeat center center;
            background-size: 100% 100%;
            width: 100%;
            &::after{
              content: '';
              position: absolute;
              top:10%; // 自己调整
              width: 100%;
              height: 100%;
              background: inherit;
              background-size: 100% 100%;
              filter: blur(2px) brightness(70%) opacity(.8); // 自己调整
              z-index: -1;
            }
}

代码说明：
class为shadow的元素添加伪元素（也就是子元素）,复制父元素的背景图并模糊处理等操作处理成阴影效果，再关键一步放入父元素背景图底部，伪元素position:absolute;z-index:-1使其创建层叠上下文，所以在父元素的背景下 ，若父元素设置z-index，则父元素创建层叠上下文伪元素会在背景之上，（块级，浮动元素值下）。

生成层叠上下文的条件：
1设置 position为absolute或relative，且z-index不为auto或0
2设置filter属性
3设置transform属性
...待补充

---

页面内容滚动与导航条同步

1、根据滚动页面的scrollTop来是页面内容与导航条保持一致 （设置actived类名）。
2、待补充

---

睡觉先~