Zero basis Vue JS learning notes advanced level

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 1Random joke
Request addresshttp://autumnfish.cn/api/joke/list
Request methodget
Request parametersNum (number of jokes)
Corresponding contentRandom 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 2User registration
Request addresshttp://autumnfish.cn/api/user/reg
Request methodpost
Request parametersUsername - string type
Response contentRegistration 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 1Random joke
Request addresshttp://autumnfish.cn/api/joke
Request methodget
Request parametersnothing
Corresponding contentA 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 1Random joke
Request addresshttp://wthrcdn.etouch.cn/weather_mini
Request methodget
Request parametersCity name
Corresponding contentWeather 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 1Song search
Request addresshttp://autumnfish.cn/search
Request methodget
Request parametersKeywords (query keywords)
Corresponding contentSong 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 1Song acquisition URL
Request addresshttp://autumnfish.cn/song/url
Request methodget
Request parametersID (song id)
Corresponding contenturl 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 1Get song details
Request addresshttp://autumnfish.cn/song/detail
Request methodget
Request parametersIDS (song id)
Corresponding contentSong 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 1Get popular comments
Request addresshttp://autumnfish.cn/comment/hot?type=0
Request methodget
Request parametersID (song id,type fixed = 0)
Corresponding contentPopular 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 1mv address acquisition
Request addresshttp://autumnfish.cn/mv/url
Request methodget
Request parametersID (if Mvid is 0, there is no mv)
Corresponding contentmv 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

Tags: Front-end Vue.js html css

Posted by gregtel on Thu, 05 May 2022 04:57:52 +0300