Note sorting source: station B up master dark horse programmer
Station B dark horse programmer quick start vue front end
Suitable for beginners Vue js，
This article is advanced
The basic part includes the Vue foundation and local application links in the course
This paper is an advanced chapter, including network application and comprehensive application
Links to basic articles
Vue.js
network application
introduce
Development and application of Vue combined with network data
axios: network request Library
axios+vue combined with vue
Consolidated by weather forecast
Basic use of axios
axios import
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
get request
axios.get(address?key=value&key2=value2).then(function(response){},function(err){})
response Function will be called after the request is successful err Will be called after the request fails
Random joke interface
| Interface 1 | Random joke |
|---|---|
| Request address | http://autumnfish.cn/api/joke/list |
| Request method | get |
| Request parameters | Num (number of jokes) |
| Corresponding content | Random joke |
Actual combat demonstration
<body>
<input type="button" value="get request" class="get">
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector(".get").onclick=function(){
axios.get("http://autumnfish.cn/api/joke/list?num=5")
//axios.get("http://autumnfish.cn/api/joke/list123?num=5")
.then(function(response){
console.log(response);
}
,function(err){
conselo.log(err);
})
}
</script>
</body>
function
Execute normally and output five jokes on the console
If the annotated statement is used, the err statement will be executed and the error code will be output on the console.
post request
axios.post(address,{key:value,key2:value2}).then(function(response){},function(err){})
response Function will be called after the request is successful err Will be called after the request fails
User registration interface
| Interface 2 | User registration |
|---|---|
| Request address | http://autumnfish.cn/api/user/reg |
| Request method | post |
| Request parameters | Username - string type |
| Response content | Registration success or failure |
Actual combat demonstration
<body>
<input type="button" value="post request" class="post">
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector(".post").onclick=function(){
axios.get("http://autumnfish.cn/api/user/reg,{username:"jack"}")
//axios.get("http://autumnfish.cn/api/user/reg123,{username:"jack"}")
.then(function(response){
console.log(response);
}
,function(err){
conselo.log(err);
})
}
</script>
</body>
function
Execute normally and output * * * user registration success on the console
If the annotated statement is used, the err statement will be executed and the error code will be output on the console.
summary
Import before use
Use the get or post method to send the corresponding request
The callback function in the then method will be triggered when the request succeeds or fails
The response content or error information can be obtained through the formal parameters of the callback function
Official website: https://github.com/axios/axios
axios+vue
How to combine axios with vue to develop network applications
A random interface
| Interface 1 | Random joke |
|---|---|
| Request address | http://autumnfish.cn/api/joke |
| Request method | get |
| Request parameters | nothing |
| Corresponding content | A random joke |
<body>
<div id="app">
<input type="button" value="Get jokes" @click="getJoke">
<p>
{{joke}}
</p>
</div>
<!--Import axios Online address -->
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<!--Import vue -->
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
<script>
var app=new vue({
el:"#app",
data:{
joke:"Funny joke"
},
methods:{
getJoke:function(){
var that=this;
axios.get("http://autumnfish.cn/api/joke")
.then(function(response){
console.log(response.data);
that.joke=response.data;
},function(err){ })
}
}
})
</script>
</body>
summary
*this in the axios callback function has changed and the data in data cannot be accessed
*Save this and use that. You can directly use the saved this in the callback function
God knows - Introduction
God knows - Enter query
1. Press enter (v-on.enter)
2. Query data (axios interface v-model)
3. Render data (v-for array that)
Weather interface
| Interface 1 | Random joke |
|---|---|
| Request address | http://wthrcdn.etouch.cn/weather_mini |
| Request method | get |
| Request parameters | City name |
| Corresponding content | Weather information |
Body html framework code
Important codes of main page
<input type="text" v-model="city" @keyup.enter="searchWeather"
class="input_txt placeholder="Please enter the weather to query">
<ul class="weather_list">
<li v-for="item in weatherList">
<span> {{item.type}}</span>
<b>{{item.low}}</b>
<b>{{item.high}}</b>
<span> {{item.data}</span>
<!--The list is omitted here css Format, showing only the main code -->
</li>
</ul>
Create js file main js and import it in the main page
<script>
var app=new Vue({
el:"#app",
data:{
city:"",
weatherList:[]
}, methods:{
searchWeather:function(){
var that=this;
axios.get('http://wthrcdn.etouch.cn/weather_mini'+this.city)
.then(function(response){
that.weatherList=response.data.data.forcast
})
.catch(function(err){ })
}
}
})
</script>
God knows - click query
1. Click city (v-on custom parameter)
2. Query data (this method)
3. Render data
New method
changeCity:function(city){
this.city=city;
this.searchWeather();
}
Bind with hyperlink
<a href="javascript:;" @click="changeCity("Beijing")"> Beijing</a>
summary
*Custom parameters can make the code more reusable
*The method defined by methods can be called through this
Comprehensive application - Yueting - Introduction
God knows - Music query
Required steps
1. Press enter (v-on. ENT)
2. Query data (axios interface v-model)
3. Render data (v-for array thar)
Song search interface
| Interface 1 | Song search |
|---|---|
| Request address | http://autumnfish.cn/search |
| Request method | get |
| Request parameters | Keywords (query keywords) |
| Corresponding content | Song search results |
Overall page layout
Create a js file and import it in the main page
<script>
var app=new Vue({
el:"#player",
data:{
query:"",
musicList:[]
},
methods:{
searchMusic:function(){
var thar =this;
axios.get("http://autumnfish.cn/search?keywords="+this.query)
.then(function(response){
that.musicList=response.data.result.songs;
},function(err){ })
}
}
})
</script>
Main page
<!-- Search song list -->
<input type="text" autocomplete="off" v-model="querry" @keyup.enter="searchMusic" >
<!-- Search song list -->
<ul>
<li v-for="item in musicList">
<a href="javascript:;"></a>
<b>{{item.name}}</b>
</li>
</ul>
summary
*When the data returned by the server is complex, you need to pay attention to the hierarchy when obtaining it
*Quickly locate the elements to be manipulated by reviewing the elements
Music playing
1. Click play (v-on custom parameters)
2. Song address acquisition (interface song id)
3. Song address setting (v-bind)
Get address from Song url
| Interface 1 | Song acquisition URL |
|---|---|
| Request address | http://autumnfish.cn/song/url |
| Request method | get |
| Request parameters | ID (song id) |
| Corresponding content | url address of the song |
New attribute
musicUrl:""
New method
playMusic:function(musicid){
var that=this;
axios.get("http://autumnfish.cn/song/url?id="+this.query)
.then(function(response){
that.musicUrl=response.data.result.songs;
},function(err){ })
}
In the main page
<li v-for="item in musicList"> <a href="javascript:; @click="playMusic(item.id)"></a> </li> <audio ref="audio" :src="musicUrl" controls autoplay loop class="myaudio"> </audio>
summary
*Song id depends on the results of song search, and it also needs to pay attention to unused data
Song cover
1. Click play (add logic)
2. Song cover acquisition (interface song id)
3. Song cover setting (v-bind)
Get song details
| Interface 1 | Get song details |
|---|---|
| Request address | http://autumnfish.cn/song/detail |
| Request method | get |
| Request parameters | IDS (song id) |
| Corresponding content | Song details include cover information |
In playmusic in the upper half
playMusic:function(musicid){
var that=this;
axios.get("http://autumnfish.cn/song/url?id="+this.query)
.then(function(response){
that.musicUrl=response.data.result.songs;
},function(err){ })
}
Newly added attribute
musicCover:""
Newly added logic in playmusic
axios.get("http://autumnfish.cn/song/detail?ids="+musicId)
.then(function(response){
that.musicCover=response.data.song[0].al.picUrl;
},function(err){ })
In the main page
<img :src="musicCover" class="cover autoRotate">
summary
*Manipulating attributes through v-bind in vue
*Data that cannot be obtained locally will basically have corresponding interfaces
Song review
1. Click play (add logic)
2. Song comment acquisition (interface song id)
3. Song comment rendering (v-for)
Get popular comments
| Interface 1 | Get popular comments |
|---|---|
| Request address | http://autumnfish.cn/comment/hot?type=0 |
| Request method | get |
| Request parameters | ID (song id,type fixed = 0) |
| Corresponding content | Popular reviews of songs |
New attribute
hotComments:[]
Newly added logic in playMusic
axios.get("http://autumnfish.cn/comment/hot?type=0&id="+musicId)
.then(function(response){
that.hotComments=response.data.hotComments;
},
funcstion(err){ })
In the main page
<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 clas="detail">{{item.content}}</dd>
</dl></div>
summary
*Generate lists through v-for in vue
Play animation
1. Monitor music play (v-on play)
2. V-on pause
3. Manipulation class name (v-bind object)
New attribute
isPlaying:false
New method
paly:function(){
this.isPlaying=true;
}
pause:function(){
this.isPlaying=false;
}
In the main page
<div class="player_con" :class"{playing:isPlayilng}">
***
</div>
summary
*The play event of audio tag will be triggered during audio playback
*The pause event of audio tag will be triggered when the audio pauses
*Set the class name through the object. The effectiveness of the class name depends on the authenticity of the following values
Play MV
1.mv icon (v-id)
2.mv address acquisition (interface mvid)
3. Mask layer (v-show v-on)
4.mv address setting (v-bind)
mv address acquisition
| Interface 1 | mv address acquisition |
|---|---|
| Request address | http://autumnfish.cn/mv/url |
| Request method | get |
| Request parameters | ID (if Mvid is 0, there is no mv) |
| Corresponding content | mv address |
Whether mv icon is displayed
<span v-if="item.mvid!=0" @click="playMV(item.mvid)"></span>
New attribute
//Display state of mask layer isShow:false //mv address mvUrl:""
New method
palyMV:function(mvid){
var that=this;
axios.get("http://autumnfish.cn/mv/url?id="+mvid)
.then(function(response){
that.isShow=true;
that.mvUrl=response.data.data.url
},function(err){ })
}
hide:function(){
this.isShow=false;
}
In the main page
<div class="vedio_con" v-show="isShow" style="display:none;"> <vedio :src="mvUrl" controls="controls"></vedio> <div class="mask" @click="hide"></div> </div>
*Different interfaces require different data, and the document needs to be read carefully
|
Whether mv icon is displayed
<span v-if="item.mvid!=0" @click="playMV(item.mvid)"></span>
New attribute
//Display state of mask layer isShow:false //mv address mvUrl:""
New method
palyMV:function(mvid){
var that=this;
axios.get("http://autumnfish.cn/mv/url?id="+mvid)
.then(function(response){
that.isShow=true;
that.mvUrl=response.data.data.url
},function(err){ })
}
hide:function(){
this.isShow=false;
}
In the main page
<div class="vedio_con" v-show="isShow" style="display:none;"> <vedio :src="mvUrl" controls="controls"></vedio> <div class="mask" @click="hide"></div> </div>
*Different interfaces require different data, and the document needs to be read carefully
*After the page structure is complex, quickly locate relevant elements by reviewing elements
