本文主要是介绍0809-vue(momentjs的使用弄时间撮日期的,父子传值props,生命周期函数beforedestroy与destroyed,黑云项目，解决相同路由跳转报错问题)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
01-momentjs的使用:
momentjs的官网: 直通车.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script><script>// moment.js是日期处理类库// 常用功能:// 1.获取当前时间,按照你指定的格式输出, 后面大写的HH是24小时制的,如果是hh是12小时制的let date1 = moment().format("YYYY年MM月DD日");//2020年05月14日let date2 = moment().format("YYYY-MM-DD HH:mm:ss");//2020-05-14 11:51:20console.log(date1,date2);// 2.把指定的一个时间戳,按照你指定的格式输出let date3 = moment(1430275262861).format("YYYY年MM月DD日");//2015年04月29日let date4= moment(1430275262861).format("YYYY-MM-DD HH:mm:ss");//2015-04-29 10:41:02console.log(date3,date4);</script>
</body>
</html>
效果说明: 基本使用就是moment(不给毫秒时间或者给一个毫秒时间).format(‘时间格式’)
Y年M月D日H小时,以24小时计,h以12小时计,m分钟,s秒
02-父子传值props(简单说一下):
父组件通过 props 向下传递数据给子组件
son.vue(子组件):
<template><div><p>我是子组件</p><p>{{msg}}</p></div>
</template><script>
export default {props:['msg'],created() {console.log(this.msg)//你好鸭},
}
</script><style ></style>
App.vue(主组件):
<template><div><p>我是主组件</p><!-- 3.使用子组件 --><son msg="你好鸭"></son></div>
</template><script>
/*
父组件传值给子组件1.在子组件标签上定义一个属性,属性的值就是父组件要传给子组件的值定义的属性名字不要用那些默认的名字比如什么class,src,url啊什么的
2. 在子组件中接受数据:props:['定义在子组件标签上得属性']
3.使用值直接用就行或者this.属性名
*///1.导入子组件
import son from "./components/son";
export default {// 2.注册子组件components: {son}
};
</script><style>
</style>
效果说明: 在父组件里面的子组件标签上定义一个属性 <子组件:‘自定义属性名=“值”’></子组件>
在子组件接收数据,在props中接收:props:[‘自定义属性名’],如果想使用传递过来的数据this.自定义属性名
注意点:props传递过来的数据是单向数据流,不可修改
下面这个你好鸭就是主组件传递给子组件的数据’你好鸭’
03-生命周期函数beforedestroy与destroyed:
son.vue(子组件):
<template><div><div class="son" ref='son'>我是子组件</div></div>
</template><script>
export default {data() {return {msg:'我是子组件的msg',timerId:""}},created() {//计时器this.timerId = setInterval(() => {console.log(111);}, 1000);},//销毁前钩子函数//销毁前,准备销毁, 他这里也是啥都可以访问,往往用来做销毁前的善后处理. beforeDestroy() {console.log('beforeDestroy',this.msg,this.$refs.son);clearInterval(this.timerId);},//销毁后钩子函数//中止了渲染(可以理解回到了created), 可以访问data和methods,不能访问渲染后的dom. //可以访问data和methods,那他也可以做善后处理//destroyed() {// console.log('destroyed',this.msg,this.$refs.son);// clearInterval(this.timerId);// },
}
</script><style scoped>.son {width: 300px;height: 200px;background-color: red;}
</style>App.vue(主组件):
<template><div><button @click="isShow = !isShow">点我</button><son v-if="isShow"></son></div>
</template><script>
/*生命周期钩子函数,都是到了某个时刻自动触发的beforeCreate: 创建前,他还不能访问data和methods,实际开发基本不用. created:创建完成,他可以访问data和methods.他不能访问vue渲染的dom,实际开发的时候用他做页面一进来数据的获取. brforeMount:渲染前,他不能访问渲染后的dom,实际开发也基本不用. mounted:渲染后,可以访问vue渲染后的dom, 是第一个可以访问dom的生命周期函数.beforeUpdate: 数据更新完毕了,但是还没有根据新的数据渲染dom. updated: 根据新的数据 已经重新渲染dom完成了. beforeDestroy:销毁前,准备销毁, 他这里也是啥都可以访问,往往用来做销毁前的善后处理. destroyed:销毁后,中止了渲染(可以理解回到了created), 可以访问data和methods,不能访问渲染后的dom. 可以访问data和methods,那他也可以做善后处理
*/
//导入子组件
import son from './components/son'
export default {data() {return {isShow:true}},//注册components:{son}
};
</script><style>
</style>
效果说明:
当红色盒子v-if是false时,不渲染时就是被销毁了,此时定时器也会一直有,此刻我不想让计时器一直打印
就可以在beforedestroy(){}里面写一些逻辑代码来阻止定时器继续打印,并且
beforedestroy是被销毁之前执行的函数,被销毁之前是什么不管是data还是methods里的数据,dom啊都是可以访问的,
当红色盒子v-if是false时,不渲染时就是被销毁了,此时定时器也会一直有,此刻我不想让计时器一直打印
就可以在destroyed(){}里面写一些逻辑代码来阻止定时器继续打印,并且
destroyed是被销毁后执行的函数,被销毁后是data还是methods里的数据是可以访问的,但是dom是不可以访问的,
04-解决相同路由跳转报错问题
// 解决相同路由跳转报错的问题
// 将vueRouter中的push保存起来
const VueRouterPush = VueRouter.prototype.push
// 重新给VueRouter中的push赋值
VueRouter.prototype.push = function push (to) {// this的指向问题// this就是vueRouter// Router.push返回的promise对象(then&catch)// 使用catch已经将错误信息捕获了return VueRouterPush.call(this, to).catch(err => err)
}
05-黑云音乐播放器:
App.vue(主组件):
<template><!-- 分析步骤: 1.准备静态资源(图片/html/css). 导入外部css文件. @import url();2.首页要显示轮播图组件2.1 建立一个home.vue轮播图组件2.2 使用路由插件 vue-routera.安装 b.导入 b.注册 d.实例化和配置 e.挂载到new Vue中 f.路由出口2.3 使用elementUi来做轮播图. a.安装 b.导入 c.注册 d.使用(复制官网代码到home.vue里面).2.4 使用axios得到轮播图真实的图片. a.安装 b.导入(那里用就在哪儿导入) c.使用. 3.完成歌曲的搜索 3.1 准备一个歌曲列表组件 3.2 配置路由信息3.3 input框 v-mode双向绑定 @keyup.enter = "搜索事件search"3.4 搜索按钮 @click="搜索事件search"3.5 搜索事件search 跳转路由,路由传值(input框中输入的要搜索的歌曲名)this.$router.push({ path:'/songList', query:{songName: this.songName } });3.6 根据接收到的路由传的值(歌曲名字) this.$route.query.songName3.7 发送ajax请求得到歌曲列表数据. 3.8 渲染一下歌曲的名字 item.name歌曲演唱者 item.artists 里面歌曲专辑 item.album.name 歌曲时长 item.duration歌曲是否有mv item.mvid 为0表示没有mv3.9.过滤器写完整歌曲的演唱者写分秒形式的时间
4.监听器监听路由传值,可以二次搜索
5.bug优化5.1搜索关键词不能为空5.2解决同一个路由跳转的bug把错误信息在百度搜索获取到解决问题的一段代码,放到js代码中
6.完成mv播放6.1 弄一个mv播放的组件(写好的html可以拷贝过来)6.2 配置mv播放组件的路由6.3 给歌曲列表页上面的mv播放按钮,设置一个点击事件6.4 点击事件中 跳转路由 并且路由传参把mvid带过去6.5 在mv播放组件那里获取传递过来的mvid6.6 用axios发送ajax请求,获取mv播放信息. 比如播放url6.7 渲染到标签上. 6.8 解决axios值还没有回来,就渲染页面报错的问题v-if="mvInfo != ''"
7.完成歌曲评论显示7.1 先写一个评论的组件(写好的html也可以拷过来)7.2 配置评论组件的路由7.3 给歌曲列表页面上的歌曲一行 设置双击事件. 7.4 双击事件 路由跳转 路由传参把歌曲id带过去. 7.5 评论组件里 获取传递过来的歌曲id7.6 发送ajax请求,获取歌曲的评论信息7.7 渲染到对应的标签上
8.完成歌曲播放8.1 先写一个播放的组件(写好的html要拷贝过来)8.2 配置播放组件的路由8.3 给歌曲列表页 播放小按钮 设置一个 单击事件8.4 单击事件 路由跳转 路由传参把歌曲id带过去8.5 播放组件 中 接收路由传过来的参数(歌曲id)8.6 发送ajax请求,获取歌曲播放的一些信息(播放url,歌曲其他信息,歌词)8.7 渲染到对应的标签上--><div id="player"><h2 class="title">黑云音乐</h2><div class="search"><input type="text" v-model="songName" @keyup.enter="search" /><button @click="search"><span class="iconfont icon-search"></span></button></div><div class="tab-wrapper"><!-- 对应的内容区域 --><div class="tab-content"><!-- 路由出口 --><router-view></router-view></div></div></div>
</template><script>
export default {data() {return {// 用户搜索的歌曲名songName: ""};},methods: {search() {// 输入框搜索歌曲不能为空if (this.songName.trim() == "") {alert("请输入正确的歌曲名");return;}// 路由传值this.$router.push({path: "/songList",query: {songName: this.songName}});}}
};
</script><style>
@import url("./assets/css/index.css");
@import url("./assets/css/iconfont.css");
</style>
home.vue(子组件):
<template><div><!-- 使用轮播图 --><el-carousel :interval="5000" arrow="always" height="370px"><el-carousel-item v-for="(item, index) in imgUrl" :key="index"><img :src="item.imageUrl" alt /></el-carousel-item></el-carousel></div>
</template><script>
// 1.2.安装导入axios
// import axios from "axios";
export default {data() {return {// 轮播图需要用到的图片存放数组imgUrl: ""};},created() {// 3.使用axios:发送ajax请求得到轮播图图片this.$axios({url: "https://autumnfish.cn/banner",params: {xxx: Math.random()}}).then(res => {// console.log(res);this.imgUrl = res.data.banners;});}
};
</script><style scoped>
img {width: 100%;
}
</style>
songLIst.vue(子组件):
<template><div><div class="result-wrapper"><div class="song" v-for="(item, index) in songList" :key="index"><div class="name" @dblclick="goComments(item.id)"><span class="iconfont icon-play" @click="playMusic(item.id)"></span>{{item.name}}<spanclass="iconfont icon-editmedia"@click="playMV(item.mvid)"v-if="item.mvid != 0"></span></div><div class="singer">{{item.artists | qjfilterSongArt}}</div><div class="album">《{{item.album.name}}》</div><div class="time">{{item.duration | filterTime}}</div></div></div></div>
</template><script>
/*
过滤器定义在filters里面.
目前过滤器只能用在插值语法和v-bind中.
使用: {{ 参数 | 过滤器名 }}
过滤器本质是一个方法,会返回一个值.
*/// 1.2.安装导入axios
// import axios from "axios";
export default {data() {return {// 存放歌曲列表的数组songList: []};},methods: {//发送请求得到歌曲列表封装成一个函数getData() {this.$axios({url: "https://autumnfish.cn/search",params: {keywords: this.$route.query.songName,xxx: Math.random() * 999}}).then(res => {//console.log(res);//把返回的歌曲列表存到songList数组中,然后渲染出来this.songList = res.data.result.songs;});},// 点击mv小图标时,去到/video路由对应的组件(把mvid参数带过去)playMV(mvid) {this.$router.push({path: "/video",query: {mvid}});},//点击播放音乐小图标时,去到/player路由对应的组件(把id参数带过去)playMusic(id) {this.$router.push({path: "/player",query: {id}});},//双击歌曲时,去到/comments路由对应的组件(把id参数带过去)goComments(id) {this.$router.push({path: "/comments",query: {id}});}},created() {//接收路由传的值,搜索的歌曲名//console.log(this.$route.query.songName);// 3.使用axios,发送请求得到搜索的歌曲列表this.getData();},//监听器们watch: {// 监听器监听传参的值// (也就是搜索的歌曲名只要一发生变化就调用这个方法发送请求得到歌曲列表)"$route.query.songName"() {this.getData();}},//过滤器们filters: {//过滤演唱者们的过滤器// filterSongArt(arr) {// let _arr = arr.map(item => {// return item.name;// });// return _arr.join("&");// },// 过滤时间的过滤器(把时间戳形式的时间搞成分秒形式)filterTime(time) {let m = ("0000" + Math.floor(time / 1000 / 60)).slice(-2); //分let s = ("0000" + Math.floor((time / 1000) % 60)).slice(-2); //秒return m + ":" + s;}}
};
</script><style scoped>
.name {cursor: default;user-select: none;
}
</style>
video.vue(子组件):
<template><div class="video" v-if="mvInfo != ''"><div class="title-wrapper"><span class="tag">MV</span><span class="title">{{mvInfo.name}}</span><span class="artist">{{mvInfo.artists | qjfilterSongArt}}</span></div><video :src="mvUrl" controls></video></div>
</template><script>
// 导入axios(用了axios全局调用,不需要每次导入了)
// import axios from "axios";
export default {data() {return {// mv的信息mvInfo: "",// mv的播放地址mvUrl: ""};},created() {//使用axios,发送请求得到mv的播放信息(标题跟演唱者)this.$axios({method: "get",url: "https://autumnfish.cn/mv/detail",params: {mvid: this.$route.query.mvid,xxx: Math.random() * 999}}).then(res => {//console.log(res);this.mvInfo = res.data.data;});//使用axios,发送请求得到mv的播放地址this.$axios({method: "get",url: "https://autumnfish.cn/mv/url",params: {id: this.$route.query.mvid,xxx: Math.random() * 999}}).then(res => {//console.log(res);this.mvUrl = res.data.data.url;});},//过滤器们// filters: {// //过滤演唱者们的过滤器// filterSongArt(arr) {// let _arr = arr.map(item => {// return item.name;// });// return _arr.join("&");// }// }
};
</script><style>
</style>
comments.vue(子组件):
<template><div class="comment-wrapper"><div class="items"><div class="item" v-for="(item, index) in commentsList" :key="index"><div class="left"><img :src="item.user.avatarUrl" alt /></div><div class="right"><div class="top"><span class="user">{{item.user.nickname}}</span><span class="content">{{item.content}}</span></div><div class="bottom"><div class="time">{{item.time | filterTime}}</div><div class="like-wrapper"><span>👍</span>({{item.likedCount}})</div></div></div></div></div></div>
</template><script>
// 导入axios
// import axios from "axios";
import moment from 'moment'export default {data() {return {// 评论列表commentsList: ""};},created() {// 使用axios发送请求得到评论的相关信息this.$axios({url: "https://autumnfish.cn/comment/music",params: {id: this.$route.query.id,xxx: Math.random() * 999}}).then(res => {//console.log(res);//把返回的评论列表存到commentsList中然后渲染出来this.commentsList = res.data.hotComments;});},// 过滤器们filters: {// 处理时间的过滤器filterTime(time) {//后面大写的HH是24小时制的,如果是hh是12小时制的return moment(time).format("YYYY年MM月DD日 HH:mm:ss")}}
};
</script><style>
</style>
player.vue(子组件):
<template><!-- 发送请求还没得到数据时songInfo是空的那点出来的都是undefined,设置这个v-if如果是空就不渲染就不会报错了--><div class="player" v-if="songInfo!=''"><div class="left"><img src="../assets/img/player_bar.png" class="play_bar" :class="{playing:playing}" /><img class="disc autoRotate" src="../assets/img/disc.png" :class="{playing:playing}" /><img class="cover autoRotate" :src="songInfo.al.picUrl" :class="{playing:playing}" /></div><div class="right"><div class="title"><img src="../assets/img/tag.png" alt /><span>{{songInfo.name}}</span></div><div class="singer">歌手:<span>{{songInfo.ar | qjfilterSongArt}}</span></div><div class="album">所属专辑:<span>{{songInfo.al.name}}</span></div><audioclass="audio"controls:src="musicUrl"@timeupdate="timeChange"@pause="pauseEvent"@play="playEvent"></audio><ul class="lyric-container"><liclass="lyric":class="{big:currentIndex==index}"v-for="(item, index) in songLrc":key="index">{{item}}</li></ul></div></div>
</template><script>
// import axios from "axios";
export default {data() {return {// 歌曲的播放地址musicUrl: "",// 歌曲信息songInfo: "",// 歌曲歌词songLrc: [],// audio进度条当前在的时间currentTime: 0,// 指的是歌词在songLrc的当前下标currentIndex: 0,// 碟片是否旋转playing: false};},methods: {timeChange(e) {this.currentTime = e.target.currentTime; //这里的单位是秒},playEvent() {this.playing = true;},pauseEvent() {this.playing = false;}},//过滤器们// filters: {// //过滤演唱者们的过滤器// filterSongArt(arr) {// let _arr = arr.map(item => {// return item.name;// });// return _arr.join("&");// }// },//监听器audio播放条变动的时间watch: {currentTime() {// 遍历歌词数组for (let i = 0; i < this.songLrc.length; i++) {if (this.songLrc[i]) {let m = parseFloat(this.songLrc[i].split(":")[0].split("[")[1] * 60); //[xx:xx]左边的分算成秒// 如果不是数字的话,就一般第一句是[by:茗雅呈]这种就没有时间不是数字if (isNaN(m)) {m = 0;}let s = parseFloat(this.songLrc[i].split(":")[1].split("]")[0]); //[xx:xx]// 如果不是数字的话if (isNaN(m)) {s = 0;}let lrcTime = m + s;//歌词时间// console.log(lrcTime);// console.log(this.currentTime);if (lrcTime > this.currentTime) {// 如果歌词时间大于当前播放时间,说明应该还在上一个歌词,所以-1this.currentIndex = i - 1;return;} else {this.currentIndex = i;}}}}},created() {//使用axios,发送请求得到音乐的播放地址this.$axios({method: "get",url: "song/url",params: {id: this.$route.query.id,xxx: Math.random() * 999}}).then(res => {//console.log(res);this.musicUrl = res.data.data[0].url;});//发送axios,发送请求得到音乐详情如图片,演唱者等this.$axios({method: "get",url: "song/detail ",params: {ids: this.$route.query.id,xxx: Math.random() * 999}}).then(res => {// console.log(res);this.songInfo = res.data.songs[0];});//发送axios,发送请求得到歌词this.$axios({method: "get",url: "lyric",params: {id: this.$route.query.id,xxx: Math.random() * 999}}).then(res => {//console.log(res);// 歌词变成数组了if (res.data.nolyric != true) {//要是有歌词的就显示歌词,如果没有歌词比如纯音乐他返回的res.data.nolyric:truethis.songLrc = res.data.lrc.lyric.split("\n");}});}
};
</script><style scoped>
/*这是我后面优化了一下让音乐的时候那个碟片可以旋转*/
/* 旋转的动画 */
@keyframes Rotate {from {transform: rotateZ(0);}to {transform: rotateZ(360deg);}
}/* 旋转的类名 */
.autoRotate {animation-name: Rotate;animation-iteration-count: infinite;animation-play-state: paused;animation-timing-function: linear;animation-duration: 5s;
}/* 是否正在播放 */
.playing {animation-play-state: running;
}.play_bar {position: absolute;left: 100px;/* top: -10px; */z-index: 10;transform: rotate(-30deg);transform-origin: 12px 12px;transition: 1s;
}/* 播放杆 转回去 */
.play_bar.playing {transform: rotate(0);
}</style>
main.js:
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// 轮播图
//1. 安装导入element插件以及他的css
// 2.注册
// 3.使用(复制官网代码到home.vue)
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);/*
1.回忆一下局部过滤器
写在某一个组件中,只对当前组件有用
写在filters里面
filters:{filterArr(参数){return 值;}
}
使用:插值语法和v-ind中{{值 | filterArr}}2.全局过滤器
写在main.js中,所有的组件都可以使用
Vue.filter('过滤器名字',(参数)=>{return 值;
});
使用:插值语法和v-ind中{{值 | filterArr}}
*/// 全局过滤器
Vue.filter('qjfilterSongArt', (arr) => {let _arr = arr.map((item) => {return item.name});return _arr.join('❤')
});// 导入router路由index.js文件
import router from './router/index.js'//导入axios
import axios from 'axios'
// axios设置基地址
// 后面用axios时就直接导入后面的 / 什么的就行
//会自动判断 axios的url前面是否有http地址，如果没有，它会把这个基地址加到前面，如果有了，它就不加了
axios.defaults.baseURL = 'https://autumnfish.cn'
// axios全局调用
//后面用axios时就不用在每个组件里面导入axios,用的时候直接this.axios({})
Vue.prototype.$axios=axiosnew Vue({render: h => h(App),router
}).$mount('#app')
router文件夹下的index.js(router路由的都放这):
// 路由抽取全部到router文件夹下的index.js文件:
import Vue from 'vue'// 导入子组件
import home from '../components/home.vue'
import songList from '../components/songList.vue'
import video from '../components/video.vue'
import player from '../components/player.vue'
import comments from '../components/comments.vue'// 1.安装导入路由插件vue-router
import VueRouter from 'vue-router'
// 2.注册
Vue.use(VueRouter)// 解决 相同路由相同参数跳转 请求组件,浏览器觉得是同一个没必要重新请求报错(百度找)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}// 3.实例化配置
const router = new VueRouter({routes: [{path: '/',component: home},{path: '/songList',component: songList},{path: '/video',component: video},{path: '/player',component: player},{path: '/comments',component: comments},{//路由重定向path: '*',redirect:'/'}]});
// 4.挂载到new Vue
// 5.路由出口// 导出路由待会去到main.js里面挂载
export default router
效果说明:
home.vue组件:展示轮播图:
从App.vue中搜索歌曲到songList.vue组件:展示歌曲列表:
点击歌曲列表中的前面中的播放小图标进入player.vue组件,展示歌曲的相关信息,播放歌曲
双击歌曲列表的某一项会进入到comments.vue组件中,展示评论
点击歌曲列表中有mv标志的小图标进入到video.vue组件中播放mv
项目补充优化部分:
1.全局过滤:上一篇文章的demo案例中写的都是局部过滤器,但是也简单提到了全局过滤器的使用方法
在该项目中,过滤处理 演唱者名字 就在多个子组件中都有用到,就可以把他写成全局过滤,
以下代码就是该项目中写在main.js的一个全局过滤器
2.路由抽取成单独js文件本来该项目的index.js跟main.js中的内容我是写在一起的,但是实际开发中这样的话main.js中代码会非常多显得冗余,所以就把里面写的关于路由部分的部分单独抽取到index.js文件中(index.js文件是在router文件夹中的文件)
其中index.js中写完路由部分之后要把实例化的router导出给到main.js中挂载到main.js中的实例化new Vue
main.js就要导入刚刚index.js导出时router
顺便讲一下export， export default， import的基本使用:
export default 一个js里只能写一个
export default 它配套的import不用写import {}它是import 名字 from 路径
export 配套的import import {名字（export 中对应的名字）} from “路径”
但是export 可以写多个
使用exporrt default导出的值，在import 名字 from “路径”,这个名字可以随便定义
但是使用export 导出的值，在import {名字} from “路径” 这里的名字必须和export的名字对应上
3.路由重定向 当我们在浏览器随便输入一个东西时也不是下面那些路由时就会重定向,这里我们重定向是定在了/路由默认在home.vue组件下
4.axios基地址与全局配置
a. 基地址设置
axios.defaults.baseURL=‘http://183.237.67.218:3000’
会自动判断 axios的url前面是否有http地址，如果没有，它会加到前面，如果有了，它就不加了
b.全局配置
在vue原型上加入$axios,让Vue的所有实例都可以调用该axios, Vue.prototype. $axios=axios
这篇关于0809-vue(momentjs的使用弄时间撮日期的,父子传值props,生命周期函数beforedestroy与destroyed,黑云项目，解决相同路由跳转报错问题)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
