Vue-resource & animate.css
Vue-resource
Vue-resource
是Vue中使用的请求网络数据的插件,简单说就是用来调接口的。它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。
vue-resource 提供了 7 种请求 API(REST 风格):
- get(url, [options])
- head(url, [options])
- delete(url, [options])
- jsonp(url, [options])
- post(url, [body], [options])
- put(url, [body], [options])
- patch(url, [body], [options])
安装Vue-resource库
1.使用cdn链接安装
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
2.引入vue-resource文件包
get请求
语法结构:this.$http.get('请求地址',参数).then(回调函数)
请求地址是一个txt文件
<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>
点击get请求按钮之后
说明已经获取到数据
post请求
语法结构:this.$http.post('请求地址',参数).then(回调函数)
post 发送数据到后端,需要第三个参数 {emulateJSON:true}
。
emulateJSON
的作用: 如果Web服务器无法处理编码为 application/json 的请求,你可以启用 emulateJSON 选项。
jsonp请求
语法结构:this.$http.jsonp('请求地址',参数).then(回调函数)
用法:
<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动画animate.css
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库,如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
过渡的类名
Vue官网说道:
在进入/离开的过渡中,会有 6 个 class 切换。
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
v-enter-to
:定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
v-leave
:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
v-leave-to
:定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
对于这些在过渡中切换的类名来说,如果你使用一个没有名字的
<transition>
,则 v- 是这些类名的默认前缀。如果你使用了<transition name="my-transition">
,那么v-enter
会替换为my-transition-enter
。
单元素/组件的过渡
Vue 提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
举例:
<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>
点击切换按钮,会看到一些元素淡入淡出的效果
自定义过渡的类名
我们可以通过以下 attribute 来自定义过渡类名:
- enter-class
- enter-active-class
- enter-to-class
- leave-class
- leave-active-class
- leave-to-class
这些过渡类名的优先级高于普通的类名,可与Animate.css结合使用
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
举例:
<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>
可以尝试一下,会出现swing和shake的动画,这些都是animate.css库里面已经定义好的,此时transition
里面的类名不能修改,是固定的
优化代码:
上面的代码展示出来的效果,可以发现,刷新页面,如果不点击按钮,元素是静止不动、没有动画效果,解决办法:
添加appear
属性
<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>
appear
属性解决了第一次没有动画的问题
设置动画进入和移出的持续时间
在<ransition>
组件上添加属性
:duration="{enter: ,leave: }"
运用js中的动画库
使用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>
此时的参数el
指所绑定的元素,如果在enter
和leave
中,则必须使用done
进行回调,否则就会被同步调用,过渡会立即完成