知识点

142 阅读1分钟

1、监控页面滚动事件:

    //获取页面高度:
    const winHeight = document.documentElement.clientHeight;
    window.addEventListener("scroll",()=>{
    //获取滚动高度
        let scrollHeight = document.documentElement.scrollTop;
        
    })

2、vue路由传参:

// router -> index.js :
        {
            path:'/player/:id',
            name:'Player',
            component:Player
        }
    index.vue:
        <router-link tag="li" :to="{name:'Player',params:{id:item.value}}"><router-link>
    //接受页面
       {{this.$route.params.id}}

3、将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

// DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
      })

4、vue 获取autio 节点时间、总时间:

<audio ref="player"/>
    this.$refs.player.addEventListener("timeupdate",()=>{console.log(this.$refs.player.currentTime)})
    this.$refs.player.addEventListener("canplay",()=>{console.log(this.$refs.player.duration)})

5、

前者:只缓存a组件、后者不缓存Player组件

6、npm install vuex --save

 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
兼容不支持promise的浏览器
npm install es6-promise --save
import 'es6-promise/auto'

7、vuex辅助函数:mapState: import {mapState} from "vuex" //与data()同级 ...mapState(["cont","text"])