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进行回调，否则就会被同步调用，过渡会立即完成