第一个实例:天气预报
知识点讲解
使用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实例分享就到这儿啦,下次再见!!!