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"])