本地应用
小黑记事本
新增功能
div内部：
<header class="header">
<h1>小黑记事本</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
class="new-todo" />
</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)"></button>
</div>
</li>
</ul>
</section>
script内：
<script>
var app = new Vue({
el: "#todoapp",
data: {
list: ["写代码", "吃饭饭", "睡觉觉"],
inputValue: "好好学习,天天向上"
},
methods: {
add: function () {
this.list.push(this.inputValue);
}}
})
</script>
</body>
效果图：
删除功能
分析：
代码：
div中：
<!-- 列表区域 -->
<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)"></button>
</div>
</li>
</ul>
</section>
scprit中：
<script>
var app = new Vue({
el: "#todoapp",
data: {
list: ["写代码", "吃饭饭", "睡觉觉"],
inputValue: "好好学习,天天向上"
},
methods: {
add: function () {
this.list.push(this.inputValue);
},
remove:function(index){
console.log("shanchu");
console.log(index);
this.list.splice(index);
}
}
})
</script>
效果：
点击小差后，对应的事件会被删除
注意：
统计功能
代码部分：
通过检查找到统计条数的位置，然后在代码位置加上一个插值表达式，里边码上数组的长度就可以啦
清空功能
分析：
点击清空所有信息（实际就是v-on清空数组）
代码：
在清空按钮处添加点击事件
<button v-show="list.length!=0" class="clear-completed" @click="clear">
清空
</button>
在方法内部写clear方法逻辑（就是将数组置空）
clear:function(){
this.list=[];
}
效果图：
点击清空前
点击清空后
隐藏功能
分析：
没有数据时，隐藏元素（v-show v-if 数组非空）
代码：
<!-- 统计和清空 -->
<footer class="footer" v-show="list.length!=0">
<span class="todo-count" v-if="list.length!=0">
共 <strong>{{ list.length }}</strong> 条
</span>
<button v-show="list.length!=0" class="clear-completed" @click="clear">
清空
</button>
</footer>
效果图：
案例总结
网络应用
介绍
axios基本使用
基础语法：
具体测试的接口：
测试代码：
<!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>axios基本使用</title>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 1.首先导入官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=6")
// axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
.then(function (response) {
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
.then(function(response){
console.log(response);
console.log(this.skill);
},function (err) {
console.log(err);
})
}
</script>
</body>
</html>
post运行结果图：
成功时
失败时
总结：
axios加vue
分析：
测试接口
代码：
<!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>axios+vue</title>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p> {{ joke }}</p>
</div>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
接口:随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var app=new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function(){
var that=this
axios.get("https://autumnfish.cn/api/joke").then(function(response){
console.log(response.data);
that.joke=response.data;
},function(err){})
}
}
})
</script>
</body>
</html>
运行结果图：
总结：
天知道天气预报网页
天知道-介绍
天知道-回车查询
分析：
代码：
main中代码
/*
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city(城市名)
响应内容:天气信息
1. 点击回车
2. 查询数据
3. 渲染数据
*/
var app = new Vue({
el:"#app",
data:{
city:'',
weatherList:[]
},
methods: {
searchWeather:function(){
// console.log('天气查询');
// console.log(this.city);
// 调用接口
// 保存this
var that = this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
.then(function(response){
// console.log(response);
console.log(response.data.data.forecast);
that.weatherList = response.data.data.forecast
})
.catch(function(err){})
}
},
})
运行结果图：
总结：
天知道-点击查询
分析：
代码：
<div class="hotkey">
<!-- <a href="javascript:;" @click="clickSearch('北京')">北京</a>
<a href="javascript:;" @click="clickSearch('上海')">上海</a>
<a href="javascript:;" @click="clickSearch('广州')">广州</a>
<a href="javascript:;" @click="clickSearch('深圳')">深圳</a> -->
<a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}</a>
</div>
changeCity:function(city){
this.city=city;
this.searchWeather();
}
运行结果图：
总结：
综合应用
音乐查询
分析
代码：
1.在js里边写好Vue逻辑
var app =new Vue({
el:"#player",
data:{
query:"",
musicList:[],
},
methods:{
searchMusic:function(){
var that= this;
axios.get("https://autumnfish.cn/search?keywords="+this.query).then(function(response){
console.log(response);
that.musicList=response.data.result.songs;
},function(err){})
}
}
})
2.在html中引用main.js
3.给搜索框添加点击事件、v-model数据模型同时在li标签上添加for循环
<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model="query" @keyup.enter="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)"></a>
<b>{{ item.name }}</b>
<span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span>
</li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
运行结果图：
总结：
音乐播放
分析：
代码：
在方法区加入代码
playMusic: function(musicId){
var that=this;
axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(function(response){
console.log(response.data.data[0].url)
that.musicUrl=response.data.data[0].url;
},
function(err){})
}
在对应的div加入如下代码
<div class="audio_con">
<audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
</div>
运行结果图：
总结：
歌曲id依赖歌曲搜索结果，对于不用的数据也需要关注
歌曲封面
效果图以及分析：
代码：
<!-- 歌曲信息容器 -->
<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="musicCover" class="cover autoRotate" />
</div>
方法中在歌曲播放功能中添加歌曲详情获取的路径
// 歌曲播放
playMusic: function(musicId){
var that=this;
// 歌曲地址获取
axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(function(response){
console.log(response.data.data[0].url)
that.musicUrl=response.data.data[0].url;
},
function(err){})
// 歌曲详情获取
axios.get("https://autumnfish.cn/song/detail"+musicId).then(function(response){
// console.log(response);
that.musicCover =response.data.songs[0].al.picUrl;
},function(err){})
}
运行结果图：
总结：
歌曲评论
效果图以及实现步骤：
代码：
<!-- 评论容器 -->
<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.nickname}}</dd>
<dd class="detail">
{{ item.content }}
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
同歌曲封面在歌曲播放功能中添加封面路径
// 歌曲播放
playMusic: function(musicId){
var that=this;
// 歌曲地址获取
axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(function(response){
console.log(response.data.data[0].url)
that.musicUrl=response.data.data[0].url;
},
function(err){})
// 歌曲详情获取
axios.get("https://autumnfish.cn/song/detail"+musicId).then(function(response){
// console.log(response);
that.musicCover =response.data.songs[0].al.picUrl;
},function(err){})
// 歌曲评论获取
axios.get("https://autumnfish.cn/comment/hot?type=0"+musicId).then(function(response){
console.log(response);
that.hotComments=response.data.hotComments;
},function(err){})
}
运行结果图：
播放动画
效果图以及分析：
代码
<!-- 歌曲信息容器 -->
<div class="player_con" :class="{playing:isPlaying}">
<img src="images/player_bar.png" class="play_bar" />
在方法区加入以下代码：
// 播放转动
play:function (){
this.isPlaying=true;
},
// 暂停停止
pause:function(){
this.isPlaying=false;
}
运行结果图：
总结：
播放MV
效果图以及分析：
代码：
data区：
data:{
query:"",
// 歌曲列表
musicList:[],
// 歌曲路径
musicUrl:"",
// 歌曲封面
musicCover: "",
// 歌曲评论
hotComments:[],
// 动画播放状态
isPlaying:falsee,
// 遮罩层的显示状态
isShow:false,
//mv的地址
mvUrl:""
}
方法区：
// mv播放
playMV:function(mvid){
var that=this;
axios.get("https://autumnfish.cn/mv/url?id="+mvid).then(function(response){
console.log(response);
that.isShow=true;
that.mvUrl=response.data.data.url;
},
function(err){})
},
// 隐藏
hide: function() {
this.isShow =false;
}
div内：
<!-- 搜索歌曲列表 -->
<div class='song_wrapper'>
<ul class="song_list">
<li v-for="item in musicList">
<a href="javascript:;" @click="playMusic(item.id)"></a>
<b>{{ item.name }}</b>
<span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span>
</li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<div class="video_con" v-show="isShow" style="display: none;">
<video :src="mvUrl" controls="controls"></video>
<div class="mask" @click="hide"></div>
</div>
运行结果图：
总结：
总结
在跟着视频学习的过程中只是粗浅的理解了一下，代码只是写了一部分，而且写代码的过程中出现许多细节上的错误，对语法的使用还不够熟练。希望以后能够独立的完成案例，不需要通过重复看视频来解决问题
扫一扫
1084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
