vue学习简单实例：天气预报，记事本，音乐播放器

最新推荐文章于 2024-06-17 16:00:54 发布

卜娴

最新推荐文章于 2024-06-17 16:00:54 发布

阅读量644

点赞数 1

文章标签： vue js css vue.js

本文链接：https://blog.csdn.net/zbuxian/article/details/108550366

版权

文章目录

第一个实例：天气预报

知识点讲解

使用vue：创建一个.html文件，通过下面的方法引入vue。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

数据渲染：
采用{{message}}的结构将数据放进HTML并显示。

v-for vue循环的方式遍历接口返回的数据，下面代码中的的item和weatherList都是可以自定义的名字。
本次的天气预报案列就是通过{{item.type}}表示天气类型，{{item.low}}，{{item.high}}表示最高最低温度，{{item.date}}表示日期。

<li v-for="item in weatherList">
	<div class="info_type">
		<span class="iconfont">{{item.type}}</span>
	</div>
	<div class="info_temp">
		<b>{{item.low}}</b>~<b>{{item.high}}</b>
	</div>
	<div class="info_data">
		<span>{{item.date}}</span>
	</div>
</li>

@keyup.enter=“searchWeacher” 表示键盘上enter键按下以后则调用js中的相应函数。（此处@为v-on的缩写）。
@click="searchWeacher"表示点击按钮则调用js中的相应函数。
完整HTML代码。
v-model=“city” 表示将当前输入框中的值传给js中自定义的data的city，已完成后续的使用。

<div class="wrap" id="app">
			<div class="search_form">
				<div class="logo">
					<img  src="img/天气.png" alt="logo">
				</div>
				<div class="form_group">
					<input type="text" @keyup.enter="searchWeacher" v-model="city" class="input_txt" value="" placeholder="请输入要查询的城市"/>
					<button class="input_sub" @click="searchWeacher">
						搜索
					</button>
				</div>
				<div class="hotkey">
					<a href="javascript:;" @click="changeCity('宜宾')">宜宾</a>
					<a href="javascript:;" @click="changeCity('雅安')">雅安</a>
					<a href="javascript:;" @click="changeCity('成都')">成都</a>
					<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
					<a href="javascript:;" @click="changeCity('北京')">北京</a>
				</div>
			</div>
			<ul class="weather_list">
				<li v-for="item in weatherList">
					<div class="info_type">
						<span class="iconfont">{{item.type}}</span>
					</div>
					<div class="info_temp">
						<b>{{item.low}}</b>~<b>{{item.high}}</b>
					</div>
					<div class="info_data"><span>{{item.date}}</span></div>
				</li>
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入Vue.js -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入axios -->
		<script src="weather.js" type="text/javascript" charset="utf-8"></script>

完整CSS代码

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.wrap{
			width: 40%;
			margin: 100px auto;
		}
		.logo{
			margin: 50px auto;
		}
		.logo img{
			vertical-align: middle;
			margin-left: 25%;
		}
		
		.form_group input{
			width: 75%;
			height: 40px;
			border: 0px;
			border-bottom: 1px solid #1B6D85;
		}
		.form_group button{
			width: 20%;
			height: 40px;
			border: 0px;
			background-color: #1B6D85;
		}
		.hotkey{
			display: flex;
			justify-content: space-around;
			
		}
		.hotkey a{
			text-decoration: none;
			color: #1B6D85;
			font-size: 25px;
		}
		ul li{
			list-style: none;
			display: block;
			float: left;
			width: 49.5%;
			height: 100px;
			text-align: center;
			border: 1px solid #1B6D85;
			line-height: 30px;
		}
	</style>

完整js代码

var app = new Vue({
	el:"#app",
	data:{
		city:'',
		weatherList:[],
		
	},
	methods:{
		searchWeacher:function(){
			// console.log(this.city);
			// 调用接口
			var that = this;
			
			axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+that.city)
			.then(function(response){
				// console.log(response);
				that.weatherList = response.data.data.forecast;
			})
			.catch(function(err){
				
			})
		},
		changeCity:function(city){
			this.city = city;
			this.searchWeacher();
		}
	},
})

这里附上一个运行截图，css代码大家可以根据自己的审美自行调整，因为我写这个的时候主要是为了运用vue所有css代码就有点粗略。
在这里插入图片描述

第二个实例：记事本

知识点讲解

这个案例相对上一的案列没有增加其他的Vue使用方式，不同于上面的接口回调显示，这个案例是直接将输入的内容显示在页面上。

在使用上增加了v-if和vv-show的使用，对于两个属性有如下解释：
相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。

如下列所示，都可用来隐藏或显示相应的元素

<span class="todo-count" v-if="list.length != 0">
		<strong>{{list.length }}</strong> items left
</span>
<button class="clear-completed" @click="clear" v-show="list.length != 0">clear</button>

完整HTML代码

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<section id="todoapp">
			<!-- 输入框 -->
			<header class="header">
				<h1>小周笔记本</h1>
				<input type="text" v-model="inputValue" @keyup.enter="add" class="new-todo" value="" autofocus="autofocus" onlayoutcomplete="off" placeholder="请输入任务"/>
			</header>
			<!-- 列表区域 -->
			<section class="main">
				<ul class="todo-list">
					<li class="todo" v-for="(item,index) in list">
						<div class="view">
							<span class="index">{{index+1}}.</span>
							<label>{{item}}</label>
							<button class="destory" @click="remove(index)">X</button>
						</div>
					</li>
				</ul>
			</section>
			<!-- 统计和清空 -->
			<footer class="footer">
				<span class="todo-count" v-if="list.length != 0">
						<strong>{{list.length }}</strong> items left
				</span>
				<button class="clear-completed" @click="clear" v-show="list.length != 0">clear</button>
			</footer>
</section>
<!-- 底部 -->
<footer class="info">
	<div class="info-line1"></div>
	<div class="info-line2"></div>
</footer>

完整CSS代码

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #E3E3E3;
			}
			#todoapp{
				width: 30%;
				margin: 0px auto;
				margin-top: 150px;
				background-color: white;
				box-shadow: 5px 5px 5px #EEEEEE;
				border:  1px solid #1B6D85;
				padding: 30px;
			}
			.header h1{
				text-align: center;
				margin-bottom: 20px;
			}
			.header input{
				width: 100%;
				height: 50px;
				border: 0;
				outline: none;
				border-bottom: 2px solid #1B6D85;
				font-size: 20px;
			}
			.todo-list{
				list-style: none;
			}
			.todo{
				height: 50px;
				line-height: 50px;
				border-bottom: #1B6D85 1px solid;
			}
			.view{
				position: relative;
			}
			
			.destory{
				position: absolute;
				right: 10px;
				top: 20px;
				display: none;
				/* margin: auto 0; */
				background-color: white;
				border: 0px;
				color: red;
				font-size: 15px;
				cursor: pointer;
				outline: none;
			}	
			.view:hover .destory{
				display: block;
			}
			.footer{
				position: relative;
				margin-top: 20px;
			}
			.footer .clear-completed{
				position: absolute;
				right: 10px;
				border: 0;
				outline: none;
				background-color: white;
				font-size: 20px;
				cursor: pointer;
			}
			.info{
				width: 34%;
				/* height: 20px; */
				height: auto;
				/* background-color: white; */
				margin: 0 auto;
			}
			.info-line1{
				width: 100%;
				height: 6px;
				background-color: white;
				border-bottom: 1px solid #1B6D85;
			}
			.info-line2{
				width: 99%;
				margin: 0 auto;
				height: 6px;
				background-color: white;
				border-bottom: 1px solid #1B6D85;
			}
</style>

完整JS代码

<script type="text/javascript">
			var app = new Vue({
				el:"#todoapp",
				data:{
					list:["xiedaima","chifanfan","shuijiaojiao"],
					inputValue:"",
				},
				methods:{
					add:function(){
						this.list.push(this.inputValue);
					},
					remove:function(index){
						this.list.splice(index,1);
					},
					clear:function(){
						this.list = [];
					}
				},
				
			})
</script>

这里也应该来一张运行截图
在这里插入图片描述

第三个实例：音乐播放

完整HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<link rel="stylesheet" type="text/css" href="index.css"/>
		<title>音乐播放器</title>
	</head>
	<body>
		<div class="wrap">
			<!-- 播放器主体 -->
			<div class="play_wrap" id="player">
				<div class="search_bar">
					<img src="img/音乐.png" class="logo">
					<!-- 搜索歌曲 -->
					<input type="text" class="search_input" autocomplete="off" v-model="query" @keyup.enter="searchMusic"/>
					<img src="img/搜索--1.png" class="search_icon" @click="searchMusic">
				</div>
				<div class="center_con">
					<!-- 搜索歌曲列表 -->
					<div class="song_wrapper">
						<ul class="song_list">
							<li v-for="item in musicList">
								<a href="javascript:;" @click="playMusic(item.id)">
									<img src="img/播放.png" class="music_play">
								</a>
								<b>{{item.name}}</b> 
								<span v-if="item.mvid !=0" @click="playMV(item.mvid)"><img src="img/视频.png" class="vedio" ></span>
							</li>
							
						</ul>
						<img src="" class="switch_btn">
					</div>
					<!-- 歌曲内容容器 -->
					<div class="player_con" :class="{playing:isPlaying}">
						<img src="" class="play_bar"/>
						<!-- 黑胶碟片 -->
						<img src="img/timg.jpg" class="disc autoRotate" >
						<img :src="musicCover" class="cover autoRotate" >
					</div>
					<div class="comment_wrapper">
						<h5 class="title">热门留言</h5>
						<div class="comment_list">
							<dl v-for="item in hotComments">
								<dt><img :src="item.user.avatarUrl" alt=""></dt>
								<dd class="name">{{item.user.nickname}}</dd>
								<dd class="detail">{{item.content}}</dd>
							</dl>
						</div>
					</div>
				</div>
				<div class="audio_con">
					<audio ref="audio" @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio">
						当前浏览器不支持audio
					</audio>
				</div>
				<!-- 视频播放 -->
				<div class="video_con" v-show="isShow">
					<video :src="mvUrl"  controls="controls"  width="100%" height="600px"> 
					</video>
					<div class="mask" @click="hide"></div>
				</div>
			</div>
			
		</div>
		
		
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="main.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

完整CSS代码

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	background-color: #1B6D85;
}
.wrap{
	position: relative;
	width: 50%;
	height: 600px;
	margin: 50px auto;
	background-color: rgba(255,255,255,0.2);
	/* overflow: hidden; */
}
.search_bar{
	position: relative;
	width: 100%;
	height: 60px;
	background-color: #23527C;
}
.search_bar .logo{
	/* position: absolute; */
	/* top: 10px; */
	margin: 6px;
	margin-left: 5%;
	width: 50px;
	vertical-align: middle;
}
.search_input{
	width: 300px;
	height: 40px;
	margin-left: 40%;
	border: 0px;
	outline: none;
	border-radius: 25px;
	padding-left: 10px;
	background-color: rgba(255,255,255,0.5);
}
.search_icon{
	width: 20px;
	position: absolute;
	top: 20px;
	right: 10%;
	cursor: pointer;
}
.center_con{
	width: 100%;
	height: 470px;
	margin-bottom: 20px;
}
.song_wrapper{
	width: 30%;
	height: 470px;
	border-right: 1px solid black;
	float: left;
	overflow: auto;
}
.song_list{
	
	width: 100%;
	height: 470px;
}
.song_list li{
	position: relative;
	height: 40px;
	line-height: 40px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/* cursor: pointer; */
}
.song_list li:nth-child(even){
	background-color: rgba(255,255,255,0.5);
}
.song_list li b{
	width: 80%;
}
.song_list .vedio{
	position: absolute;
	right: 10px;
	top: 10px;
	width: 20px;
	vertical-align: middle;
	cursor: pointer;
}
.music_play{
	width: 20px;
	/* padding-top: 5px; */
	vertical-align: middle;
	cursor: pointer;
}
.player_con{
	position: relative;
	width: 40%;
	height: 470px;
	float: left;
}
.playing .autoRotate{
	animation: palydohua 5s linear infinite;
}
@keyframes palydohua{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.player_con .disc{
	/* position: absolute; */
	display: block;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	margin: 50px auto;
	/* z-index: 1; */
}
.player_con .cover{
	position: absolute;
	/* display: block; */
	width: 150px;
	height: 150px;
	border-radius: 50%;
	/* margin: 50px auto; */
	top: 120px;
	left: 75px;
	z-index: 1;
}
.comment_wrapper{
	width: 30%;
	height: 470px;
	border-left: 1px solid black;
	float: right;
	overflow: auto;
}
.comment_wrapper .title{
	margin: 10px;
}
.comment_list dl dt img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: 5px;
	float: left;
	vertical-align: middle;
}
.comment_list .name{
	display: block;
	height: 50px;
	line-height: 50px;
	font-size: 15px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.comment_list .detail{
	display: block;
	margin: 10px;
	clear: both;
	font-size: 12px;
	text-align: justify;
}
.audio_con{
	clear: both;
	width: 100%;
	height: 50px;
	/* padding-top: 40px; */
	background-color: white;
}
.audio_con .myaudio{
	width: 100%;
	height: 50px;
	border-radius: 0;
	background-color: white;
}
.video_con{
	position: absolute;
	top: 0px;
	z-index: 1;
	width: 100%;
	height: 600px;
	background-color: #000000;
}
.video_con video{
	position: absolute;
	z-index: 16;
}
.mask{
	position: absolute;
	top: -50px;
	left: -380px;
	z-index: 2;
	width: 200%;
	height: 800px;
	background-color: rgba(0,0,0,0.5);
}

完整JS代码

var app = new Vue({
	el:"#player",
	data:{
		// 查询关键字
		query:"",
		// 歌曲数组
		musicList:[],
		// 歌曲地址
		musicUrl:"",
		// 歌曲封面
		musicCover:"",
		// 歌曲评论
		hotComments:[],
		// 动画播放状态
		isPlaying:false,
		// 遮罩层显示状态
		isShow:false,
		// mv地址
		mvUrl:"",
	},
	methods:{
		// 歌曲搜索
		searchMusic:function(){
			var that = this;
			axios.get("https://autumnfish.cn/search?keywords="+that.query)
			.then(function(response){
				// console.log(response);
				that.musicList = response.data.result.songs;
			},function(err){
				
			})
			
		},
		// 歌曲播放
		playMusic:function(musicId){
			var that = this;
			// console.log(musicId);
			// 获取歌曲地址
			axios.get("https://autumnfish.cn/song/url?id="+musicId)
			.then(function(response){
				// console.log(response);
				that.musicUrl = response.data.data[0].url;
			},function(err){
				
			})
			// 歌曲详情获取
			axios.get("https://autumnfish.cn/song/detail?ids="+musicId)
			.then(function(response){
				that.musicCover = response.data.songs[0].al.picUrl;
			},function(err){
				
			})
			// 歌曲评论
			axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId)
			.then(function(response){
				// console.log(response.data.hotComments)
				that.hotComments = response.data.hotComments;
			},function(err){
				
			})
		},
	
	
		play:function(){
			this.isPlaying = true;
		},
		pause:function(){
			this.isPlaying = false;
		},
		
		// 播放MV
		playMV:function(mvid){
			var that = this;
			axios.get("https://autumnfish.cn/mv/url?id="+mvid)
			.then(function(response){
				// console.log(response.data.data.url);
				that.isShow = true;
				that.mvUrl = response.data.data.url;
				
			},function(err){})
		},
		// 隐藏
		hide:function(){
			this.isShow = false;
			this.mvUrl= "";
		}
	}
})

运行截图，这里我搜索了周深，然后最左侧就显示了相关的歌曲，当我点击了大鱼中间部分就出现对应的海报，右侧出现当前歌曲的热评。
在这里插入图片描述
到这里三个简单的vue案列就结束啦，其实三个案列使用的Vue相关属性都是大同小异的，毕竟这只是入门级的基础，如果认认真真的完成三个案列我相信对Vue的这些基本属性应该是会有比较清晰的了解。
当然，Vue还有很多要学习的，第一次以这样的方式的分享，其实不知道该怎么讲解我觉得有用的知识点，希望下一次可以提升一下自己。

本次Vue实例分享就到这儿啦，下次再见！！！

卜娴

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
vue学习简单实例：天气预报，记事本，音乐播放器

文章目录第一个实例：天气预报知识点讲解第二个实例：记事本知识点讲解第三个实例：音乐播放第一个实例：天气预报知识点讲解使用vue：创建一个.html文件，通过下面的方法引入vue。<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>数据渲染：采用{{message}}的结构将数据放进HTML并显示。v-for vue循环的方式遍历接口返回的数据，下面代码中的的item和weatherLi
复制链接

扫一扫