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>												


											

0809-vue(momentjs的使用弄时间撮日期的,父子传值props,生命周期函数beforedestroy与destroyed,黑云项目，解决相同路由跳转报错问题)相关推荐
	

    
								
  1. vue路由跳转报错解决
		
    vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...
    
		
    2. 
						
  2. Vue项目在IE浏览器上路由跳转报错
		
    Vue2.x 项目,登录成功之后跳转到主页面,其他浏览器都是可以的,只有 IE 不行.错误如下 [vue-router] Failed to resolve async component defau ...
    
		
    3. 
						
  3. Vue路由跳转报错Avoided redundant navigation to current location: “/xxxxxx“.
		
    在使用this.$router.push进行路由的跳转时,出现如下报错: 今天在开发的过程遇到了上述问题,通过查阅资料得到了解答,以自己的理解进行了整理 报错原因: 当我们在使用编程式路由进行页面跳转 ...
    
		
    4. 
						
  4. vue 路由跳转报错 redirected when going from via a navigation guard
		
    主要是的代码里面 路由跳转 404 进行了权限拦截: 404进行放行 if(to.name === '404') {next()}
    
		
    5. 
						
  5. 解决Vue路由重复跳转报错
		
    给一个元素绑定跳转路由的事件时,跳转后当我们重复点击时就会报以下错误: 原因:vueRouter版本问题, 解决方案1: 使用旧版本的VueRouter   3.0.xxx 解决方案2: 跳转路径后, ...
    
		
    6. 
						
  6. vue子组件赋值props_vue 父子传值props赋值失效问题
		
    前天我的同事问了我一个问题,说她遇到一个父子组件之间的props赋值失效的问题,奇怪的是同一个页面另外一个地方也调用了同一个子组件并且props使用赋值正常,而且她和我说其他props能正常赋值,还就 ...
    
		
    7. 
						
  7. vue 路由嵌套（子路由跳转报错或者失效解决方法）
		
    嵌套路由时,子路由懒加载有时会失效,最好定义引用好,再进行加载,示例结构: {path: '/shopRech',redirect:'/shopRech/shopRechHome',component ...
    
		
    8. 
						
  8. 第四篇、vue组件生命周期 beforeDestroy()和destroyed()
		
    beforeDestroy() 实例销毁前,数据实例方法都有但是没什么用Vue.component('son', {template: '#son',data() {return {num: 4}}, ...
    
		
    9. 
						
  9. vue 当前路由重复点击跳转报错
		
    当菜单路由重复点击时,会出现以下报错: 虽然没有什么影响(不知道深层有什么影响,页面运行反正没啥问题),但是有个报错看着就毕竟闹心. 有以下解决方案: router配置中添加代码块不再报错 // 解决 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. TCP连接的状态转换图深度剖析
		
    2. 
						
  2. P1156 垃圾陷阱
		
    3. 
						
  3. linux中grep基本用法
		
    4. 
						
  4. ann人工神经网络_深度学习-人工神经网络（ANN）
		
    5. 
						
  5. 脉位调制解调 matlab,通信原理与matlab仿真v2 第五章 DBPSK调制解调器(1)
		
    6. 
						
  6. windows 程序设计及API
		
    7. 
						
  7. java.lang.IncompatibleClassChangeError:
		
    8. 
						
  8. 学习网站的闪卡暴露了美军核机密
		
    9. 
						
  9. OA系统新流程创建与管理办法
		
    10. 
						
  10. OSCHINA网页旋转-愚人节效果
		
    11. 
						
  11. 树莓派linux led字符设备驱动（ linux自带）
		
    12. 
						
  12. 通达OA工作流程-使用方法
		
    13. 
						
  13. 阿里云S6机型与N4机型哪个好？
		
    14. 
						
  14. 题目 1026: [编程入门]数字逆序输出
		
    15. 
						
  15. 防止电脑辐射的有效方法
		
    16. 
						
  16. Un-Routed Net ConStraint报错的原因
		
    17. 
						
  17. C++ 探索之旅 | 第一部分第一课：什么是 C++
		
    18. 
						
  18. python 如何把字符串转换成浮点数
		
    19. 
						
  19. 【vnc远程桌面】未联网状态下使用离线包配置vnc
		
    20. 
						
  20. Qt入门程序，通过qtcreater创建一个项目
		
    21. 
		

	


热门文章
	

    
									
  1. 为什么hadoop一定是分布式的未来
			
    2. 
						
  2. 一个人开发一个App，小程序先行？
			
    3. 
						
  3. 个人任务五——项目回顾（徐闻谦）
			
    4. 
						
  4. 泰拉瑞亚发现服务器_泰拉瑞亚停运公告
			
    5. 
						
  5. Asp.Net Core 2.0 之旅---数据访问仓储模式的事务管理
			
    6. 
						
  6. UML 交互图 （顺序图、通信图、鲁棒图、定时图）
			
    7. 
						
  7. vue中v-model使用方法
			
    8. 
						
  8. npm install mysql 报错_npm遇到的问题--npm install 执行报错 /bin/git submodule update -q --init --recursive...
			
    9. 
						
  9. 一文让你彻底搞懂最小二乘法（超详细推导）
			
    10. 
						
  10. 数据获取成本对医疗影像AI产业化的影响
			
    11.