Vue(三)
本地应用
记事本
具有添加、删除、统计、清空、隐藏的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
</head>
<body>
<section id="todoapp">
<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)">
X
</button>
</div>
</li>
</ul>
</section>
<footer class="footer" v-show="list.length!=0">
<span class="todo-count">
<strong>{{ list.length }}</strong> items left
</span>
<button class="clear-completed" @click="clear">
Clear
</button>
</footer>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/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>
网络应用
网络请求库:axios
axios的基本使用
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
document.querySelector(".get").onclick = function(){
axios.get("https://autumnfish.cn/api/joke/list?num=6")
.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:"xherlock"})
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>
</body>
- axios必须先导入才可以使用
- 使用get或post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取相应内容,或错误信息
axios+vue
axios结合vue开发网络应用
随机获取一条笑话
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{ joke }}</p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.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){
console.log(response);
that.joke = response.data;
},function(err){
console.log(err);
})
}
},
})
</script>
</body>
天知道——应用
<body>
<div id="app">
<input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的地区">
<button class="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 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="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.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){
console.log(response.data.data.forecast);
that.weatherList = response.data.data.forecast
})
.catch(function(err){})
},
changeCity:function(city){
this.city = city;
this.searchWeather();
}
},
})
</script>
</body>
- 应用的逻辑代码建议和页面分离,使用单独的js文件编写
- axios回调函数中this指向改变,需要额外保存一份
- 服务器返回的数据比较复杂需要注意层级结构
- 自定义参数可以让代码的复用性更高
- methods中定义的方法内部,可以通过this关键字点出其他的方法
综合应用
音乐播放器
歌曲搜索
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){})
},
播放歌曲
playMusic:function(musicId){
// console.log(musicId);
var that = this;
axios.get("https://autumnfish.cn/song/url?id="+musicId)
.then(function(response){
// console.log(response);
that.musicUrl = response.data.data[0].url;
},function(err){})
}