Vue-resource & animate.css
View-resource
Vue-resourceIt is a plug-in used in Vue to request network data. Simply put, it is used to adjust the interface. It can initiate a request and process the response via XMLHttpRequest or JSONP. In other words, what $.ajax can do can also be done by the vue-resource plugin, and the API of vue-resource is more concise.
vue-resource provides 7 request APIs (REST style):
- get(url, [options])
- head(url, [options])
- delete(url, [options])
- jsonp(url, [options])
- post(url, [body], [options])
- put(url, [body], [options])
- patch(url, [body], [options])
Install Vue-resource library
1. Use the cdn link to install
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
2. Introduce the vue-resource file package
get request
grammar structure:this.$http.get('请求地址',参数).then(回调函数)
The request address is a txt file
<div id="app">
<input type="button" value="get请求" @click='getInfo'>
</div>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
getInfo(){
// 当发起get请求之后，通过.then来设置成功的回调函数
this.$http.get('./test.txt').then(res=>{
document.write(res.body)
},function(){
console.log('请求失败');
})
}
}
})
</script>
After clicking the get request button, the
data has been obtained
post request
grammar structure:this.$http.post('请求地址',参数).then(回调函数)
post Send data to the backend, the third parameter is required {emulateJSON:true}.
emulateJSON Function: If the web server cannot handle the request encoded as application/json, you can enable the emulateJSON option.
jsonp request
grammar structure:this.$http.jsonp('请求地址',参数).then(回调函数)
usage:
<div id="app">
<input type="button" value="jsonp请求" @click='jsonpInfo'>
</div>
<script>
new Vue({
el:'#app',
data:{
},
methods: {
jsonpInfo(){
this.$http.jsonp('http://jsonplaceholder.typicode.com/posts').then(result=>{
console.log(result.data);
})
}
},
})
</script>
Vue animation animate.css
Vue provides a variety of different ways to apply transition effects when inserting, updating or removing the DOM. The following tools are included:
- Automatically apply classes in CSS transitions and animations
- Can be used with third-party CSS animation libraries, such as Animate.css
- Use JavaScript in the transition hook function to directly manipulate the DOM
- Can be used with third-party JavaScript animation libraries, such as Velocity.js
Transitional class name
Vue official website says:
In the transition of entry/exit, there will be 6 class switching.
v-enter: Define the starting state of entering the transition. It takes effect before the element is inserted, and is removed in the next frame after the element is inserted.
v-enter-active: Define the state when the transition takes effect. Applied throughout the transition phase, it takes effect before the element is inserted, and is removed after the transition/animation is complete. This class can be used to define the process time, delay and curve function of the entry transition.
v-enter-to: Define the end state of entering the transition. The next frame takes effect after the element is inserted (at the same time the v-enter is removed), and is removed after the transition/animation is completed.
v-leave: Define the starting state of the departure transition. It takes effect immediately when the exit transition is triggered, and the next frame is removed.
v-leave-active: Define the state when the leave transition takes effect. It is applied during the entire exit transition phase, takes effect immediately when the exit transition is triggered, and is removed after the transition/animation is completed. This class can be used to define the process time, delay and curve function of leaving the transition.
v-leave-to: Define the end state of the leaving transition. The next frame takes effect after the leave transition is triggered (at the same time the v-leave is deleted), and is removed after the transition/animation is completed.
For these class names that are switched during the transition, if you use an unnamed one
<transition>, then v- is the default prefix for these class names. If you use it<transition name="my-transition">, itv-enterwill be replaced bymy-transition-enter.
Single element/component transition
Vue providestransitionIn the following cases, you can add entry/exit transitions to any element and component
- Conditional rendering (using v-if)
- Conditional display (using v-show)
- Dynamic component
- Component root node
For example:
<style>
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 3s;
}
</style>
<div id="app">
<button @click='handleClick'>切换</button>
<transition name="fade">
<div v-if='show'>Hello World</div>
</transition>
</div>
<script>
new Vue({
el:'#app',
data:{
show:true
},
methods: {
handleClick(){
this.show=(this.show===true?false:true);
}
},
})
</script>
Click the toggle button, and you will see some elements fade in and out
Custom transition class name
We can customize the transition class name through the following attributes:
- enter-class
- enter-active-class
- enter-to-class
- leave-class
- leave-active-class
- leave-to-class
These transitional class names have higher priority than ordinary class names and can be used in conjunction with Animate.css
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
For example:
<div id="app">
<button @click='handleClick'>切换</button>
<transition
name="fade"
appear
enter-active-class='animated swing '
leave-active-class='animated shake '
>
<div v-if='show'>Hello World</div>
</transition>
</div>
<script>
new Vue({
el:'#app',
data:{
show:true
},
methods: {
handleClick(){
this.show=(this.show===true?false:true);
}
},
})
</script>
You can try it. Swing and shake animations will appear. These are already defined in the animate.css library. At this time transition, the class names inside cannot be modified and are fixed.
Optimizing the code: The
above code shows the effect, you can find that if you refresh the page, if you don't click the button, the element is still and there is no animation effect. The solution:
Add appearattributes
<transition
name="fade"
appear
enter-active-class='animated swing '
leave-active-class='animated shake '
appear-active-class='animated swing'
>
<div v-if='show'>Hello World</div>
</transition>
appearProperty solves the problem of no animation for the first time
Set the duration of animation entry and exit
<ransition>Add attributes on the component
:duration="{enter: ,leave: }"
Use the animation library in js
Use Velocity.js
<div id="app">
<button @click='handleClick'>toggle</button>
<transition
name='fade'
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show="show">应用js中的动画库</div>
</transition>
</div>
<script>
new Vue({
el:'#app',
data:{
show:true
},
methods: {
handleClick(){
this.show=!this.show
},
handleBeforeEnter(el){
el.style.opacity=0;
},
handleEnter(el,done){
Velocity(el,{
opacity:1
},{
duration:1000,
complete:done
})
},
handleAfterEnter(el){
console.log('动画结束');
}
},
})
</script>
The parameter at this time elrefers to the bound element. If it is in the entersum leave, it must be used donefor callback, otherwise it will be called synchronously and the transition will be completed immediately