一、计数器
<html lang="en">
<head>
<meta charset="utf-8">
<title>计数器</title>
</head>
<body>
<div id="app">
<button @click="sub">-</button>
<span>{
{ num }}</span>
<button @click="add">+</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
if(this.num<10){
this.num++
}
else{
alert("别点啦，最大值！")
}
},
sub:function(){
if(this.num>0){
this.num--
}
else{
alert("别点啦，到底啦！")
}
}
},
})
</script>
</body>
</html>
二、图片切换
<html lang="en">
<head>
<meta charset="utf-8">
<title>V-show</title>
</head>
<body>
<div id="mask">
<h2>乐山师范学院</h2>
<img width="1000" :src="imgArr[index]">
<br>
<br>
<input type="button" value="上一张" @click="prev" v-show="index>0">
<input type="button" value="下一张" @click="next" v-show="index<imgArr.length-1">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#mask",
data: {
imgArr: [
"./image/ls-1.jpg",
"./image/ls-2.jpg",
"./image/ls-3.jpg",
"./image/ls-4.jpg",
"./image/ls-5.jpg",
"./image/ls-6.jpg",
"./image/ls-7.jpg"
],
index: 0,
previsShow: false
},
methods: {
prev:function(){
this.index--
},
next:function(){
this.index++
}
}
})
</script>
</body>
</html>
三、小红记事本
<html lang="en">
<head>
<meta charset="utf-8">
<title>小红记事本</title>
<style>
ul,li{
list-style-type: none；
}
</style>
</head>
<body>
<div id="note">
<h2>欢迎使用小红记事本</h2>
<input type="text" v-model="inputValue" @keyup.enter="add">
<ul v-for="iterm,index in list">
<li>{
{ index+1 }}. {
{ iterm }} <input type="button" value="delete" @click="del(index)"></li>
</ul>
<br>
<span v-show="list.length > 0"><i>{
{ list.length }} 项事宜未完成！</i><input type="button" value="clear" @click="clear"></span>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#note",
data: {
list: [
"吃饭",
"睡觉",
"打豆豆"
],
inputValue: "请输入后按回撤..."
},
methods: {
add:function(){
this.list.push(this.inputValue);
},
del:function(index){
this.list.splice(index,1);
},
clear:function(){
this.list = [];
}
}
})
</script>
</body>
</html>
四、天气早知道
main.js
/*
接口：http://wthrcdn.etouch.cn/weather_mini
方法：get
参数：city（城市）
返回：该城市一周的天气状况
*/
var app = new Vue({
el: "#app",
data: {
city: "深圳",
weatherList: []
},
methods: {
searchWeather:function(){
var that = this;
console.log(this.city);
url = "http://wthrcdn.etouch.cn/weather_mini?city=" + this.city;
axios.get(url).then(function(response){
that.weatherList = response.data.data.forecast;
console.log(that.weatherList)
}, function(err){
console.log(err)
})
},
changeCity:function(city){
this.city = city;
this.searchWeather();
}
}
})
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>天气早知道</title>
</head>
<body>
<div id="app">
<h2>天气早知道</h2>
<input type="text" value="请输入城市名称" v-model="city" @keyup.enter="searchWeather"> <button id="input_sub" @click="searchWeather">搜索</button>
<br>
<a href="javascript:;" @click="changeCity('北京')">北京</a>
<a href="javascript:;" @click="changeCity('上海')">上海</a>
<a href="javascript:;" @click="changeCity('广州')">广州</a>
<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
<ul>
<li v-for="item in weatherList">
{
{ city }}天气： {
{ item.date }} {
{ item.type }} {
{ item.low }}~{
{ item.high }} {
{ item.fengli }} {
{ item.fengxiang }} <hr>
</li>
</ul>
</div>
<!--官网提供的 axios cdn地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/main.js">
/*
接口：http://wthrcdn.etouch.cn/weather_mini
方法：get
参数：city（城市）
返回：该城市一周的天气状况
*/
</script>
</body>
</html>
五、邂听音乐
main.js
/*
接口1：https://autumnfish.cn/search
方法：get
参数：keywords（关键字）
返回：与该关键字相关的歌曲列表
接口2：https://autumnfish.cn/song/url
方法：get
参数：id（歌曲id）
返回：返回该歌曲在线播放地址
接口3：https://autumnfish.cn/comment/hot?type=0
方法：get
参数：id（歌曲id）
返回：返回该歌曲热门评论
*/
var app = new Vue({
el: "#music",
data: {
query: "周杰伦",
musicList: [],
musicUrl: "",
comments: []
},
methods: {
searchMusic:function(){
var that = this;
axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(function(response){
console.log(response.data.result.songs);
that.musicList = response.data.result.songs;
}, function(err){
console.log(err);
})
},
getMusicUrl:function(id){
var that = this;
axios.get("https://autumnfish.cn/song/url?id=" + id).then(function(response){
console.log(response.data.data[0].url);
that.musicUrl = response.data.data[0].url;
}, function(err){
console.log(err)
}),
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + id).then(function(response){
console.log(response.data.hotComments);
that.comments = response.data.hotComments;
}, function(err){
console.log(err);
})
}
}
})
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>邂听音乐</title>
</head>
<body>
<div id="music">
<h2>欢迎使用邂听</h2>
<input type="text" v-model="query" @keyup.enter="searchMusic"> <input type="button" value="搜索" @click="searchMusic">
<audio ref="audio" :src="musicUrl" controls autoplay loop></audio>
<ul v-for="item,index in musicList">
<li><input type="button" value="播放" @click="getMusicUrl(item.id)"> {
{ index+1 }}. {
{ item.name }}</li>
</ul>
<h3>热门评论</h3>
<ul v-for="item in comments">
<li>{
{ item.user.nickname }} - {
{ item.content}}</li>
</ul>
</div>
<!--官网提供的 axios cdn地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/5-main.js">
</script>
</body>
</html>