[外门弟子]JS-1|2020年01月06日的日报-技能树.IT修真院

发表于： 2020-01-06 23:31:49

1 1520

今天完成的事情：

实现了一个两个功能：

1.通过vue来实现页面宽度变化的时候页面动态的改变。

其实也就是通过vue来操作dom，vue里面有个mounted的生命周期钩子函数，他表示在页面已经渲染之后可以进行的操作，在这个里面我们就可以操作页面的dom了，在本任务中想实现当页面宽度变化的时候动态的决定侧面的导航栏的显示情况。首先在data中写下两个对象来保存状态和值：

  data() {
    return {
      navShow: true,
      windowWidth: document.body.clientWidth
    }
  },

document.body.clientWidth表示当前的页面宽度，

然后在mounted中通过onresize方法来监听页面宽度变化，并且把页面宽度赋值给windowWidth来保存。

  mounted() { //dom已经渲染出来了，在这个函数里面操作dom，通过window.onresize方法可以把当前页面的宽度复制给windowWidth。
    window.onresize = () => {
      this.windowWidth = document.body.clientWidth
    }
  },

然后通过vue里面watch对象来创建一个函数来监听data函数中的windowWidth,如果这个数值发生改变这执行相应的操作：

watch: { //通过watch来监听，因为在moutned中对windowWidth进行了更改，所以对这个对象进行监听，如果发生变化则执行指定的操作
    windowWidth: function(newvalue) {
      setTimeout(() => { //防止频繁调用导致卡顿,用箭头函数指向vue实例
        if(this.windowWidth <= 768) {
          this.navShow = false
        }else if(this.windowWidth > 768) {
          this.navShow = true
        }
      },100)
    }
  },

写这个日报的时候突然感觉，如果在mounted中直接进行判断是不是也可以，直接把watch部分的内容写到mounted中？应该也是可以跑起来的吧.....

接下来还需要做一个判断,刚进入这个页面的时候如果页面宽度大于768则显示侧面的导航栏，如果下雨768则只显示header部分的按钮，而导航栏隐藏起来，很自然的想到在created里面进行判断就好了。

  created() {
    if(this.windowWidth <= 768) {
      this.navShow = false
    }else {
      this.navShow = true
    }
  },

2.实现了点击header部分的按钮收起和显示导航栏的效果。

因为我把header部分拆分出去形成了一个独立的组件，所以必须用子组件向父组件传值，其实只需要传递一个点击事件就行了，就是告诉父组件我点击了这个按钮，然后父组件控制导航栏的隐藏和显示。

通过this.$emit()方法发送这个事件，

  methods: {
    navClick() {
      this.$emit('btnClickEvent')
    }
  },

然后在父组件给这个子组件绑定一下自定义事件，并把这个自定义事件交给navClick函数处理就好了，

    <Header @btnClickEvent="navClick"></Header>

    navClick() {
      this.navShow = !this.navShow
    }

反思：最近比较贪玩耽误了好多进度....

明天要做的事情：

1.给导航栏的显示和隐藏做一个动画效果

2.继续任务8

返回列表

【任务6】 [外门弟子]JS-1 | 2020年01月06日 的日报 中品

评论

分享到

【任务6】 [外门弟子]JS-1 | 2020年01月06日的日报中品