1、计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="sub">-</button>
<span>{{ num }}</span>
<button @click="add">+</button>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{
add:function (){
if(this.num<10){
this.num++
}else {
alert("别点啦，最大啦！")
}
},
sub:function (){
if(this.num>0){
this.num--
}else {
alert("别点啦，最小啦")
}
}
}
})
</script>
</body>
</html>
2、图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="photo">
<div class="center">
<h2 class="title">
请输入英雄：
</h2>
<img :src="imgArr[index]" alt="" class="content">
<a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
<img src="./img/左箭头.png" alt="">
</a>
<a href="javascript:void(0)" v-show="index @click="next" class="right">
<img src="./img/右箭头.png" alt="">
</a>
</div>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#photo",
data:{
imgArr:[
"./img/猴子.png",
"./img/赵云.png",
"./img/公孙离.png",
],
index:0
},
methods:{
prev:function (){
if(this.index>0){
this.index--;
}
},
next:function (){
if(this.index<2){
this.index++;
}
},
}
})
</script>
</body>
</html>
3、记事本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<section id="todoapp">
<!--输入框区域-->
<header class="header">
<h1>记事本</h1>
<input class="new-todo" placeholder="请输入任务" autofocus="autofocus" @keyup.enter="add" v-model="inputValue">
</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="destroy" @click="remove(index)">X</button>
</div>
</li>
</ul>
</section>
<!--统计区域-->
<footer class="footer" v-show="list.length!=0">
<span class="toCount">
<strong>{{list.length}}</strong>
items left
</span>
<button class="clear" @click="clear">clear</button>
</footer>
</section>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#todoapp",
data:{
list:["写代码","吃饭饭","睡觉觉"],
inputValue:"好好学习"
},
methods:{
add:function (){
this.list.push(this.inputValue)
},
remove:function (index){
this.list.splice(index,1)
},
clear:function (){
this.list=[]
}
}
})
</script>
</body>
</html>
4、axios基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input class="get" value="getRequest" type="button">
<input class="post" value="postRequest" type="button">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector(".get").onclick=function (){
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function (response){
console.log(response)
},function (err){
console.log(err)
})
}
document.querySelector(".post").onclick=function (){
axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"})
.then(function (response){
console.log(response)
},function (err){
console.log(err)
})
}
</script>
</body>
</html>
5、axios+vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{joke}}</p>
</div>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function (){
var that = this
axios.get("https://autumnfish.cn/api/joke").then(function (response){
that.joke=response.data
},function (err){
console.log(err)
})
}
}
})
</script>
</body>
</html>
6、网络应用-城市天气查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" autofocus="autofocus" @keyup.enter="searchWeather" v-model="city">
<input type="button" value="搜索" @click="searchWeather">
<div class="hotkey">
<a href="javascript:void(0)" @click="changeCity('北京')">北京</a>
<a href="javascript:void(0)" @click="changeCity('上海')">上海</a>
<a href="javascript:void(0)" @click="changeCity('广州')">广州</a>
<a href="javascript:void(0)" @click="changeCity('深圳')">深圳</a>
</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_date"><span>{{item.date}}</span></div>
</li>
</ul>
</div>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
city:"城市",
weatherList: []
},
methods:{
searchWeather:function (){
var that = this
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(function (response){
that.weatherList=response.data.data.forecast
})
.catch(function (err){})
},
changeCity:function (city){
this.city=city
this.searchWeather()
}
}
})
</script>
</body>
</html>
7、网络应用-音乐播放器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="player">
<!--搜索歌曲-->
<div class="search_bar">
<input autofocus="autofocus" v-model="query" @keyup.enter="searchMusic">
<button @click="searchMusic">搜索</button>
</div>
<div class="center_con">
<!--搜索歌曲列表-->
<div>
<ul>
<li v-for="item in musicList">
<a href="javascipt:;" @click="playMusic(item.id)">X</a>
<b>{{item.name}}</b>
<span v-show="item.mvid!=0" @click="playMV(item.mvid)"><i>MV</i></span>
</li>
</ul>
</div>
<!--歌曲信息容器-->
<div class="player_con" :class="{playing:isplaying}">
<!--class=playing用于图片旋转，暂未实现-->
<img :src="musicCover" class="musicCover">
</div>
<!--评论容器-->
<div class="comment_wrapper">
<h5>热门评论</h5>
<dl v-for="item in commentList">
<dt>{{item.user.nickname}}:</dt>
<dd>{{item.content}}</dd>
</dl>
</div>
<!--播放器-->
<div class="audio_con">
<audio ref='audio' :src="musicURL" controls autoplay class="myaudio"
@play="play" @pause="pause"></audio>
<!--controls:带有浏览器默认控件,autoplay:自动播放-->
</div>
<!--mv播放器-->
<div class="video_con" v-show="isShow" style="display: none">
<video controls :src="mvURL" autoplay></video>
</div>
</div>
</div>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
var app = new Vue({
el:"#player",
data:{
query:"周杰伦",
musicList:[],
musicURL:"",
musicCover:"",
commentList:[],
isplaying:false,
mvURL:"",
isShow:false,
},
methods:{
searchMusic:function (){
var that = this
axios.get("https://autumnfish.cn/search?keywords="+this.query)
.then(function (response){
that.musicList=response.data.result.songs
},function (err){
console.log(err)
})
},
playMusic:function (musicId){
var that = this
axios.get("https://autumnfish.cn/song/url?id="+musicId)
.then(function (response){
that.musicURL=response.data.data[0].url
},function (err){
console.log(err)
})
axios.get("https://autumnfish.cn/song/detail?ids="+musicId)
.then(function (response){
that.musicCover=response.data.songs[0].al.picUrl
},function (err){
console.log(err)
})
axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId)
.then(function (response){
that.commentList=response.data.hotComments
},function (err){
console.log(err)
})
},
play:function (){
this.isplaying=true
console.log(this.isplaying)
},
pause:function (){
this.isplaying=false
},
playMV:function (mvid){
var that = this
axios.get("https://autumnfish.cn/mv/url?id="+mvid)
.then(function (response){
that.mvURL=response.data.data.url
console.log(that.mvURL)
that.isShow=true
},function (err){
console.log(err)
})
}
}
})
</script>
</body>
</html>
