什么是生命周期

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