Vue生命周期 vue-resource axios的使用

什么是生命周期

从Vue实例创建、运行、到销毁期间，总是伴随各种各样的事件，这些事件统称为生命周期

Vue生命周期

 

Vue-resource 的使用

 

n   直接在页面中，通过script标签，引入vue-resource的脚本文件；

n   注意：引用的先后顺序是 - 先引用Vue的脚本文件，再引用vue-resource的脚本文件

 

get请求  需要传参用query 传参 ?拼接

this.$http.get("url").then((res)=>{

console.log(res.body)

})

post请求

如果参数类型不是json就需要写第三个固定参数{ emulateJSON: true }

this.$http.post("url",{id:'123'}).then((res)=>{

console.log(res)

})

参数类型不是json

this.$http.post("url",{type: "free",pageNum:1,pageSize:5 },{ emulateJSON: true }).then(res=>{

                console.log(res);

            })

 

 

axios的使用

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

 

 

get请求  传参也是 query形式

axios.get("url").then((res)=>{

console.log(res)

})

 

post

POST 只有两个参数 1url 2请求体

            // 通过内置对象，创建对应格式的请求体

参数类型是url式

let url= new URLSearchParams()

url.append("type","free")

 

参数类型式 fromdata式

let from = new FormData()

from.append("type","free")

 

当数据类型是JSON时不用转化，直接写就可以

 

axios.post("url",参数).then((res)=>{

 

})

 

 

Vue动画

这些类名写在style标签中

v-enter 

v-enter-to 

v-enter-active

v-leave

v-leave-to

v-leave-active

 

需要哪些内容有动画效果时，需要用

transition标签包住

 

如果有多个需要不同的动画时，就需要给 transition标签 添加name属性

然后定义动画类名时，把v- 换成 起的名字-

 

第三方css动画库

 

导入动画类库：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animae.min.css"/>

 

只需要添加进场或入场一种动画时

直接在那个标签加需要的类名即可

<h1 class="animated zoomInDown">An animated element</h1>

 

既需要添加入场和退场时

需要用 transition标签包住并且给transition标签添加 enter-active-class 和 leave-active-class

 

 <transition

        enter-active-class="animate__flipOutX"

        leave-active-class="animate__fadeOutBottomLeft">

        <h1 v-show="flag" class="animate__animated">An animated element</h1>

      </transition>

 

 

动画钩子函数

 

定义 transition 组件以及三个钩子函数

<style>

.show{

transition:all 2.4s ease

}

</style>

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
    <div v-if="isshow" class="show">OK</div>
  </transition>

 <script>

      const vm = new Vue({

        el: "#app",

        data: {

          isshow: true,

        },

        methods: {

          beforeEnter(el) {

            // 动画进入之前的回调

            el.style.transform = "translateX(500px)";

          },

          enter(el, done) {

            // 动画进入完成时候的回调

            // 检测dom存在

            // el.offsetWidth;

            el.offsetHeight;

            el.style.transform = "translateX(0px)";

            // done调用方法表示完成

            done();

          },

          afterEnter(el) {

            // 动画进入完成之后的回调

            // this.isshow = !this.isshow;

          },

        },

      });

    </script>

 

 

列表动画

之前使用动画需要用 transition 标签 现在列表动画需要用

transition-group 这个标签来包住需要使用动画的内容

 

 

v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：

<style>

.v-move{

transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}

</style>