Vue/axios-基础练习
参考:
文章目录
vue基础指令
-
vue实例的作用范围是什么: el命中的元素内部,包括他的子元素里; 但建议给div用,因为其他标签有自己的样式
-
el挂载点,可以用其他选择器,但建议用id
-
vue不能给html和body设置
v-text: 本质是innerText, 简写成{ {}}
v-html: 本质是innerHtml
v-show=“true”: 本质是切换元素样式里的display属性
v-if: 本质是操纵dom元素(移除添加), 刷新dom树, 耗性能
v-bink: src="" 设置元素属性, 如src,title,class; 简写为 :src=""
v-for: 根据数据响应式生成列表结构,同步改变; 合并写的时候,必须按先item再index的顺序,否则形参意义会变 (item, index) in list
v-on:click=“函数名(形参)“指令简写成@click=””; 还有很多修饰符处理事件: v-on修饰符, 比如@keyup.enter可以修改事件为输入后再按enter触发
v-model=“变量” 设置表单元素(双向数据绑定,改表单内部的值的时候变量本身也会被更改, 就很适合做文字放大框,同步显示输入文字)
axios基础使用方法
axios是一个功能强大的网络请求库
//官网axios在线地址
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//方法1: 获取的接口
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
//方法2: 用户注册的接口
axios.post(地址,{key:value,key2:value2}).then(function(response){}, function(err){})
//response返回服务器返回的信息, err比如会发生在地址写错的清况,返回一些404信息
axios怎么与vue结合
已知vue的methods里的函数, this指向这个vue对象; 但是axios里then之后的回调函数里的this, 指向window, 所以得新建变量在methods一开始存this
<!-- 引入开发版本vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
joke: "笑话",
},
methods: {
getJoke: function() {
var thisN = this;
//console.log(this); //这里this指向Vue对象
axios.get("https://autumnfish.cn/api/joke").then(function(response) {
//console.log(this.joke); //undefined, 因为这里this已经变成window了,因为then以后执行的回调函数主体是window
thisN.joke = response.data;
}, function(err) {
// console.log(err);
})
}
},
})
练习1: 点击按钮加减数字
<!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>
<style>
button {
display: inline-block;
width: 200px;
height: 200px;
background-color: pink;
font-size: 50px;
}
span {
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<button @click="sub">-</button>
<span>{
{ num }}</span>
<button @click="add">+</button>
</div>
<!-- 开发版本vue.js -->
<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() {
// console.log('add');
if (this.num < 5) {
this.num++;
} else {
alert('别按了');
}
},
sub: function() {
// console.log('sub');
if (this.num > 0) {
this.num--;
} else {
alert('别按了')
}
},
}
});
</script>
</body>
</html>
练习2: 点击切换显示or隐藏
//v-show或者v-if不一样
<style>
button {
display: block;
width: 30px;
height: 30px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<img v-show="isShow" src="images/wakeup.jpg" alt="">
<!-- <img v-if="isShow" src="images/wakeup.jpg" alt=""> -->
<button @click="changeIsShow"></button>
</div>
<!-- 开发版本vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
//数据对象
isShow: false
},
methods: {
//方法
changeIsShow: function() {
this.isShow = !this.isShow;
}
}
});
</script>
</body>
练习3: 点击更改目标的样式
类名可以用两种方式写,建议用第二种对象的方式
<img :src="imgSrc" :title="imgTitle + '可以这样字符串拼接'" :class="isActive?'leiming':''" alt="">
<!-- 三元表达式决定类名, 也可以用下面方法: 意思是类名是否生效,取决于后面的bool值 -->
<img :src="imgSrc" :title="imgTitle + '可以这样字符串拼接'" :class="{leiming:isActive}" alt="">
<!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>
<style>
.leiming {
display: block;
width: 30px;
}
button {
display: block;
width: 20px;
height: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<img :src="imgSrc" :title="imgTitle + '可以这样字符串拼接'" :class="isActive?'leiming':''" alt="">
<button @click="changeIsActive"></button>
</div>
<!-- 开发版本vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
//数据对象
imgSrc: "images/wakeup.jpg",
imgTitle: "醒醒",
isActive: true,
},
methods: {
changeIsActive: function() {
this.isActive = !this.isActive
}
}
});
</script>
</body>
</html>
练习4: 响应式生成列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K2EqMzhV-1617211148063)(v-for)]
<!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>
<style>
</style>
</head>
<body>
<div id="app">
<ul>
<!-- item是形参,可更改 -->
<li v-for="(item,index) in arr">
{
{ index }} {
{ item }}
</li>
<h2 v-for="item in pigs">
{
{ item.name }}
</h2>
</ul>
<button @click="addPig">点我加入新猪</button>
<button @click="removePig">点我过年</button>
</div>
<!-- 开发版本vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
arr: [1, 2, 3, 4, 5],
pigs: [{
name: "佩奇"
}, {
name: "乔治"
}]
},
methods: {
addPig: function() {
this.pigs.push({
name: "你"
})
},
removePig: function() {
// this.pigs.shift(); //从最前面删
this.pigs.pop(); //从最后面删
}
}
})
</script>
</body>
</html>
练习5: 点击获取一则笑话
综合练习
练习1: todoList,输入任务回车后,自动添加进列表,可删除
<!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>
<style>
.logo:hover {
background-color: pink;
}
</style>
</head>
<body>
<div id="todoList">
<input @keyup.enter="add" v-model="inputValue" type="text" placeholder="请输入内容">
<ul>
<!-- item index是形参, 要跟自身意义对应上得按先后顺序写 -->
<li v-for="(item, index) in list">
<span>{
{ index+1}}</span>
<label for="">{
{ item}} </label>
<!-- delete函数传index进去删除对应的li -->
<label @click="deleteIt(index)" for="" class="logo">{
{ deleteLogo }} </label>
</li>
</ul>
<!-- 统计一共多少条任务,同步更新/无任务时不显示 -->
<strong v-show="list.length!=0">{
{list.length + '个任务'}} </strong>
<!-- 一次清空全部任务 v-on清空数组/无任务时不显示 -->
<button @click="clear" v-show="list.length!=0">清空</button>
</div>
<!-- 开发版本vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#todoList",
data: {
list: ["吃饭饭", "睡觉觉", "打豆豆"],
inputValue: "", //用v-model同步真正输入的内容
deleteLogo: "×",
},
methods: {
add: function() {
this.list.push(this.inputValue); // this依然指向app
},
//删除一项
deleteIt: function(num) {
this.list.splice(num, 1);
},
//清空
clear: function() {
this.list = [];
},
}
})
</script>
</body>
</html>
练习2: axios+vue实现网络应用: 天气预报
分析:
1.按下回车开始查询数据(v-on.enter)
2.获取查询数据(axios获取, v-model同步显示)
3.渲染进列表显示(v-for)
<!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>Document</title>
<style>
button {
display: inline-block;
width: 50px;
height: 30px;
font-style: 14px;
}
</style>
</head>
<body>
<div id="app">
<input v-model="cityName" value="武汉" placeholder="请输入城市按回车查询" @keyup.enter="search">
<button @click="search()">搜索</button>
<ul class="weather_list">
<li v-for="(item, index) in weatherList">
<span>{
{ item.date}}</span>
<span>{
{ item.fengli}} </span>
</li>
</ul>
<div class="cities">
<a href="#" @click="selectCity('武汉')">武汉</a>
<a href="#" @click="selectCity('北京')">北京</a>
<a href="#" @click="selectCity('上海')">上海</a>
</div>
</div>
<!-- 引入开发版本vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
cityName: '',
weatherList: [],
},
methods: {
search: function() {
var thisN = this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.cityName)
.then(function(response) {
//具体的天气信息存在这个位置,是array格式,每个数组元素是对象格式,进一步读取
console.log(response.data.data.forecast);
thisN.weatherList = response.data.data.forecast;
})
.catch(function(err) {
})
},
selectCity: function(city) {
this.cityName = city;
this.search(); //调用search
}
}
})
</script>
</body>
</html>
练习3: 音乐播放器
功能:1.歌曲搜索(keywords=‘名字’);2.歌曲播放(获取专属id,然后请求播放接口即可播放);3.歌曲封面显示;4.歌曲评论显示;5.播放/暂停;
<!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>简易听歌</title>
<style>
* {
margin: 0;
padding: 0;
}
#app,
.infor {
width: 700px;
margin: 30px auto;
background-color: yellow;
}
#app {
position: relative;
height: 400px;
background-color: rgba(0, 0, 0, .2);
}
/* .search {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100px;
} */
button {
display: inline-block;
width: 70px;
height: 30px;
}
.musicList {
float: left;
width: 200px;
height: 300px;
}
ul {
width: 200px;
height: 300px;
overflow-y: scroll;
background-color: pink;
}
li {
display: block;
width: 100%;
min-height: 30px;
overflow: hidden;
cursor: pointer;
}
li:hover {
background-color: yellow;
}
.mask {
position: absolute;
top: 20%;
left: 45%;
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
}
.mask img {
width: 120px;
height: 120px;
vertical-align: middle;
}
.comments {
position: absolute;
top: 30px;
right: 0;
width: 200px;
height: 300px;
overflow-y: scroll;
background-color: pink;
}
.comments img {
width: 30px;
height: 30px;
}
.audio_part {
width: 300px;
height: 54px;
margin: auto;
}
.playing {
animation: rotation 7s linear infinite;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="infor">
功能:1.歌曲搜索;2.歌曲播放;3.歌曲封面显示;4.歌曲评论显示;5.播放动画;
<strong>说明: 点击歌曲名即可播放</strong>
<div>后续补充: audio自带,但进度条通过获取歌曲时长,算移动速度,css3过渡和动画都能做; 黑胶唱片效果: 2Drotate;如果获取到mv也要有选项播放</div>
</div>
<div id="app">
<!-- 搜索框 -->
<div class="search">
<input type="text" v-model="query">
<button @click="search">搜索</button>
</div>
<!-- 歌曲list -->
<div class="music_list">
<ul>
<li v-for="(item, index) in musicList" @click="playMusic(item.id)">
<span> {
{item.name}} </span>
</li>
</ul>
</div>
<!-- 播放设置 -->
<div class="audio_part">
<audio :src="musicUrl" @play="play" @pause="pause" autoplay="autoplay" muted="muted" controls autoplay loop></audio>
</div>
<!-- 播放时的封面等 -->
<div class="play_part ">
<!-- isPlaying决定是否有playing样式 -->
<div class="mask" :class="{playing:isPlaying}">
<img :src="maskUrl " alt=" ">
</div>
</div>
<!-- comments -->
<div class="comments ">
<dl v-for="item in comments ">
<dt><img :src="item.user.avatarUrl " alt=" "></dt>
<dd>{
{item.nickname}} </dd>
<dd>{
{item.content}} </dd>
</dl>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js "></script>
<script>
// 设置axios的基地址
axios.defaults.baseURL = 'https://autumnfish.cn';
// axios.defaults.baseURL = 'http://localhost:3000';
var app = new Vue({
el: "#app ",
data: {
query: '周杰伦',
musicList: [],
musicUrl: " ", //获得歌曲url放进audio标签即可自动播放
maskUrl: " ",
comments: [],
isPlaying: false,
},
methods: {
search: function() {
var thisN = this;
axios.get('/search?keywords=' + this.query).then(function(response) {
thisN.musicList = response.data.result.songs
}, function(err) {
});
},
//以下是点击歌曲名li即可播放触发
playMusic: function(musicId) {
var thisN = this;
//通过歌曲id获取歌曲的地址, 放进audio的src里播放; item-ID-songUrl
axios.get("/song/url?id=" + musicId)
.then(function(response) {
thisN.musicUrl = response.data.data[0].url;
}, function(err) {
});
//通过歌曲id获取歌曲封面的地址,放进img的src里
axios.get("/song/detail?ids=" + musicId)
.then(function(response) {
thisN.maskUrl = response.data.songs[0].al.picUrl;
}, function(err) {
});
//通过歌曲id获取评论,再v-for更新
axios.get('/comment/hot?type=0&id=' + musicId)
.then(function(response) {
thisN.comments = response.data.hotComments;
}, function(err) {
});
},
//以下两个函数是由点击按钮触发
play: function() {
this.isPlaying = true;
},
pause: function() {
this.isPlaying = false;
}
}
});
</script>
</body>
</html>