1.计数器
<!DOCTYPE html>
<html lang="en" xmlns: xmlns:>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>计数器</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div id="app">
<!-- 计数器功能区域 -->
<div class="input-num">
<button @click="jian">
-
</button>
<span v-text="num"></span>
<button @click="jia">
+
</button>
</div>
<img src="http://qnaaa.zzaaa.net/aaajy/logo.png" alt="" />
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script type="text/javascript" src="E:\学习\练习\vue.js"></script>
<script>
var aaa=new Vue({
el:"#app",
data:{
num:0
},
methods:{
jia(){
this.num++;
},
jian(){
if(this.num>0){
this.num--;
}
}
}
});
</script>
</body>
</html>效果：
2.轮播图
<!DOCTYPE html>
<html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>轮播图</title>
<link rel="stylesheet" href="./css/index.css" />
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script type="text/javascript" src="E:\学习\练习\vue.js"></script>
</head>
<body>
<div id="mask">
<div class="center">
<h2 class="title">
<img src="./images/logo.png" alt="">
深圳创维校区环境
</h2>
<!-- 图片 -->
<img :src="arr[index]" alt="" />
<!-- 左箭头 -->
<a href="javascript:void(0)" class="left" @click="prev()" v-if="index>0">
<img src="./images/prev.png" alt="" />
</a>
<!-- 右箭头 -->
<a href="javascript:void(0)" class="right" @click="next()" v-if="index<arr.length-1">
<img src="./images/next.png" alt="" />
</a>
</div>
</div>
<script>
var app=new Vue({
el:"#mask",
data:{
// 所有图片路径
arr:["./images/00.jpg","./images/01.jpg","./images/02.jpg","./images/03.jpg","./images/04.jpg","./images/05.jpg",
"./images/06.jpg","./images/07.jpg","./images/08.jpg","./images/09.jpg","./images/10.jpg"],
index:0
} ,
methods:{
prev(){
if (this.index>0){
this.index--;
}
},
next(){
if (this.index<this.arr.length-1){
this.index++;
}
}
}
});
</script>
</body>
</html>效果：
3.小黑记事本
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>小黑记事本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./css/Bookindex.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header" >
<h1>小黑记事本</h1>
<input
autofocus="autofocus"
autocomplete="off"
placeholder="请输入任务"
class="new-todo"
v-model="message"
@keyup.enter="send()"
/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in msg">
<div class="view">
<span class="index">{{index+1}}</span> <label>{{item}}</label>
<button class="destroy" @click="del(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" v-if="msg.length>0">
<span class="todo-count"> <strong>{{msg.length}}</strong> items left </span>
<button class="clear-completed" @click="clear">
Clear
</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info">
<p>
<a href="http://www.baidu.com"
><img src="./img/logo.png" alt=""
/></a>
</p>
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script type="text/javascript" src="E:\学习\练习\vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
msg:["吃饭饭","睡觉觉","大兔兔"],
message:"",
},
methods:{
send(){
this.msg.push(this.message);
},
del(index){
this.msg.splice(index,1);
},
clear(){
this.msg=[];
}
}
});
</script>
</body>
</html>
效果：
4.天气
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天知道</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/tianindex.css" />
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="E:\学习\练习\vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="axios.min.js"></script>
<!-- 自己的js -->
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input
type="text"
class="input_txt"
placeholder="请输入查询的天气"
v-model="city"
@keyup.enter="query(city)"
/>
<button class="input_sub" @click="query(city)">
搜 索
</button>
</div>
<div class="hotkey">
<a href="javascript:;" v-for="item in msg" @click="query(item)">{{item}}</a>
</div>
</div>
<ul class="weather_list">
<li v-for="item in arr">
<div class="info_type"><span >{{item.type}}</span></div>
<div class="info_temp">
<b >{{item.low}}</b>
~
<b>{{item.high}}</b>
</div>
<div class="info_date"><span>{{item.date}}</span></div>
</li>
</ul>
</div>
<script>
var tq=new Vue({
el:"#app",
data:{
city:"",
arr:[],
msg:["北京","上海","广州","深圳"]
},
methods:{
query(city) {
var that=this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+city).then(function (result) {
console.log(result.data.data.forecast);
that.arr=result.data.data.forecast;
})
}
}
})
</script>
</body>
</html>效果：
5.音乐播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>悦听player</title>
<!-- 样式 -->
<link rel="stylesheet" href="css\playerIndex.css">
</head>
<body>
<div class="wrap">
<!-- 播放器主体区域 -->
<div class="play_wrap" id="player">
<div class="search_bar">
<img src="images/player_title.png" alt="" />
<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic(query)" />
</div>
<div class="center_con">
<!-- 搜索歌曲列表 -->
<div class='song_wrapper'>
<ul class="song_list">
<li v-for="song in musics "><a href="javascript:;" @click="playSong(song.id)"></a> <b>{{song.name}}</b>
<span v-if="song.mvid!=0"><i @click="playMv(song.mvid)"></i></span></li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息容器 -->
<div class="player_con" :class="{playing:isplaying}">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img :src="picUrl" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl v-for="comment in comments">
<dt><img :src="comment.user.avatarUrl" alt=""></dt>
<dd class="name">{{comment.user.nickname}}</dd>
<dd class="detail">
{{comment.content}}
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<div class="audio_con">
<audio ref='audio' :src="songUrl" controls autoplay loop class="myaudio" @play="isplaying=true" @pause="isplaying=false"></audio>
</div>
<div class="video_con" v-if="pMv!=0">
<video controls="controls" :src="mvUrl"></video>
<div class="mask" ></div>
</div>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script type="text/javascript" src="vue.js"></script>
<script src="axios.min.js"></script>
<!-- 自己的js -->
<script>
var app=new Vue({
el:"#player",
data:{
query:"",
musics:[],
songUrl:"",
mvUrl:"",
comments:[],
pMv:"0",
picUrl:"",
isplaying:false
} ,
methods:{
searchMusic(mu){
var that=this;
axios.get(`https://autumnfish.cn/search?keywords=${mu}`).then(function (result) {
that.musics=result.data.result.songs;
})
},
playSong(id){
var that=this;
that.isplaying=true;
axios.get(`https://autumnfish.cn/song/url?id=${id}`).then(function (result) {
that.songUrl=result.data.data[0].url;
});
axios.get(`https://autumnfish.cn/comment/hot?type=0&id=${id}`).then(function (result) {
that.comments=result.data.hotComments;
});
axios.get(`https://autumnfish.cn/song/detail?ids=${id}`).then(function (result) {
that.picUrl=result.data.songs[0].al.picUrl;
})
},
playMv(mvid){
var that=this;
axios.get(`https://autumnfish.cn/mv/url?id=${mvid}`).then(function (result) {
that.pMv="1";
that.mvUrl=result.data.data.url;
});
}
}
})
</script>
</body>
</html>效果：
3352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
