Vue-resource和动画animate.css的基本介绍及使用

深藏阁楼爱情的钟 2022-12-20 12:39 90阅读 0赞

### Vue-resource & animate.css ###

*  Vue-resource
 *   *  安装Vue-resource库
     *  get请求
     *  post请求
     *  jsonp请求
 *  Vue动画animate.css
 *   *   *  过渡的类名
     *  单元素/组件的过渡
     *  自定义过渡的类名
     *  运用js中的动画库

# 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链接安装

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>

![在这里插入图片描述][20201112142125720.png_pic_center]  
点击get请求按钮之后  
![在这里插入图片描述][20201112142144136.png_pic_center]  
说明已经获取到数据

## 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>

![在这里插入图片描述][20201112144431656.png_pic_center]

# 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 被删除)，在过渡/动画完成之后移除。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

> 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 `<transition>`，则 v- 是这些类名的默认前缀。如果你使用了 `<transition name="my-transition">`，那么`v-enter` 会替换为`my-transition-enter`。

## 单元素/组件的过渡 ##

Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

*  条件渲染 (使用 v-if)
 *  条件展示 (使用 v-show)
 *  动态组件
 *  组件根节点

举例：

![在这里插入图片描述][20201112151940701.png_pic_center]  
点击切换按钮，会看到一些元素淡入淡出的效果

## 自定义过渡的类名 ##

我们可以通过以下 attribute 来自定义过渡类名：

*  enter-class
 *  enter-active-class
 *  enter-to-class
 *  leave-class
 *  leave-active-class
 *  leave-to-class

这些过渡类名的优先级高于普通的类名，可与Animate.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`进行回调，否则就会被同步调用，过渡会立即完成

[20201112142125720.png_pic_center]: /images/20221120/b61cf9255175446fa688b20747661bcb.png
[20201112142144136.png_pic_center]: /images/20221120/cf8de84a571b4739b99e9ea0ed8fd20b.png
[20201112144431656.png_pic_center]: /images/20221120/39a7fba9590c4c29a5841e015bde0fa1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/d28f42a320f9431ea5007b212f4e7c5e.png
[20201112151940701.png_pic_center]: /images/20221120/dacbfbde1f654449bbdaf11b3eab3dfb.png