【Vue】Vue基础自用笔记&Day03_①Vue生命周期②Vue网络请求③Vue动画

1. Vue生命周期

官方图示

如图所示，总共有八个生命周期函数：
	1. beforeCreate()
	2. created()
	3. beforeMount()
	4. mounted()
	5. beforeUpdate()
	6. updated()
	7. beforeDestroy()
	8. destroyed()

beforeCreate生命周期钩子函数：
初始化尚未完成，data数据，methods方法都未挂在在vue实例上
一般用于页面重定向

      beforeCreate() {
        console.log('一般用于页面重定向');
        console.log(this.msg);
        console.log("这个undefined是因为，初始化还没完成呢");
      },

created生命周期钩子函数：
初始化已经完成，data数据，methods方法都可以被调用了
是第一个能操作data中数据对象和调用methods方法的生命周期， 一般用于接口请求+数据初始化

   methods: {
      getClassification() {
        axios.post(this.baseUrl + "/weChat/applet/subject/list", { enable: 1 }).then(res => {
          this.classificationList = res.data.rows
        })
        ......
       }
   created() {
      this.getClassification()
      this.getSwiper()
      this.getCourses().then(res => { this.freeCourseList = res.data.rows })
      this.getCourses('boutique', 1, 5).then(res => { this.boutiqueCourseList = res.data.rows })
      this.getCourses('discount', 1, 5).then(res => { this.discountCourseList = res.data.rows })
      this.getFooterHref()
    }

beforeMount生命周期钩子函数：
进入运行阶段前；此时虚拟dom尚未挂载，页面元素尚未更新

beforeMount() {
    console.log("虚拟dom挂载前，此时页面元素尚未更新");
  }

mounted生命周期钩子函数：
dom元素挂载后，如果需要操作dom，可以在此mounted周期执行

mounted() {
  console.log("dom元素挂载后，如果需要操作dom，可以在此mounted周期执行");
},

beforeUpdate生命周期钩子函数：
元素发生更新时，元素更新前的阶段；可以执行0次到多次；

beforeUpdate() {
  console.log("元素一更新我就打印，但我是更新前就打印了");
}

updated生命周期钩子函数：
元素发生更新时，元素更新完成的阶段；同样可以执行0次到多次；

updated() {
  console.log("元素一更新我就打印，但我是更新后才打印");
}

beforeDestroy生命周期钩子函数：
vue销毁前的阶段，一般用来清除定时器、函数等操作。

beforeDestroy() {
  console.log("销毁前清除占内存的操作");
}

destroyed生命周期钩子函数：
vue销毁后的阶段，好像没什么用。

---

this.$nextTick()方法

this.$nextTick()解释为在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。 也就是说，当dom元素发生改变，重新渲染dom树后，再执行vue.$nextTick()里面的内容。

它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
为了不影响this指向，参数一般为箭头函数。

举例：在DOM加载完成后，进行Swiper轮播图初始化，避免异步影响

this.$nextTick(() => {
  // swiper轮播图
  var mySwiper = new Swiper('.swiper', {
    direction: 'horizontal', // 垂直切换选项
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination'
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    speed: 800,
    autoplay: true, //自动切换
    autoplay: {
      delay: 1500, //自动切换的时间间隔，单位ms
      disableOnInteraction: false //用户操作swiper之后，是否禁止autoplay
    },
    spaceBetween: 0
  })
})

2. Vue网络请求

①vue-resource

1.X.X 版本使用：vue-resource，它依赖于Vue.js，需要注意引入顺序，必须引入在vue.js后，
现在已几乎弃用，基本只有在维护老版本应用时会用到。

vue-resource 发送GET请求：
this.$http.get()

this.$http.get(this.baseUrl + "/weChat/applet/course/banner/list?number=4").then(res => {
  console.log(res);
  this.imgSrcList = res.body.data
})

vue-resource 发送POST请求：
this.$http.post()
默认请求参数类型为 application/json，它有第三个参数：{ emulateJSON: true }，
用来设置post提交的参数编码类型为 application/x-www-form-urlencoded

this.$http.post(this.baseUrl + "/weChat/applet/course/list/type",
  { type: "free", pageNum: 1, pageSize: 10 }, { emulateJSON: true }).then(res => {
    console.log(res);
    this.coursesList = res.body.rows
  })

---

 

②Axios

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Axios的引入不需要放在vue.js后，它和vue-resource的返回值相同，都是一个Promise对象

 
axios 发送GET请求：

axios.get(this.baseUrl + "/weChat/applet/course/banner/list?number=4").then(res => {
  console.log(res);
  this.imgSrcList = res.data.data
})

axios 发送POST请求：
axios有许多参数，如果需要指定post请求的参数类型为application/x-www-form-urlencoded的话，需要这么做：

 let formUrl = new URLSearchParams()
 formUrl.append("type", "free")
 formUrl.append("pageNum", 1)
 formUrl.append("pageSize", 10)

然后直接将创建的对象写在请求地址后即可：

 axios.post(this.baseUrl + "/weChat/applet/course/list/type", formUrl).then(res => {
   console.log(res);
   this.coursesList = res.data.rows
 })

3.Vue动画

①使用CSS创建动画

1.使用 transition 标签将需要过渡的元素包裹起来

<transition>
  <div class="box" v-show="flag">{{msg}}</div>
</transition>
<transition name="v2">
  <div class="box" v-show="flag">{{msg}}</div>
</transition>

2.使用类名过渡时，需要设置的类名有六个：
	v-enter、v-enter-to、v-enter-active
	v-leave、v-leave-to、v-leave-active
	
有多个transition标签时，需要指定name属性。

name 属性用于自动生成 CSS 动画类名

如果 transition 标签元素没有设置 name 属性，则对应的动画类名为 v-XXX ( v-enter等 )

如果设置了 name 属性，则对应的动画类名为 属性值-XXX ( 属性值-enter等 )

当存在多个 tansition 标签时，我们可以通过 name 属性给各个 transition 标签指定不同的 CSS 动画效果

.box {
 width: 150px;
 height: 30px;
 margin: 0 auto;
 background-color: rgb(255, 213, 0);
 color: rgb(0, 134, 87);
}

.v-enter,
.v2-leave-to {
 transform: translateX(-200px);
}

.v-enter-to,
.v-leave,
.v2-enter-to,
.v2-leave {
 transform: translateX(0px);
}

.v-enter-active,
.v-leave-active {
 transition: all 2s;
}

.v2-enter,
.v-leave-to {
 transform: translateX(200px);
}

.v2-enter-active,
.v2-leave-active {
 transition: all 2s;
}

3. 创建Vue实例，实现动画效果切换

const vm = new Vue({
  el: '#app',
  data: {
    flag: true,
    msg: '这动画老记不住啊'
  },
  methods: {},
})

或者使用第三方动画库：animate.css

引入动画类库后直接使用它的类名即可。

---

②使用JS创建动画

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

<div id="app">
  <input type="button" value="切换动画" @click="isshow = !isshow">
  <transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
    <div v-if="isshow" class="show">OK</div>
  </transition>
</div>

定义三个 methods 钩子方法：

methods: {
   beforeEnter(el) { // 动画进入之前的回调
     el.style.transform = 'translateX(500px)';
   },
   enter(el, done) { // 动画进入完成时候的回调
     el.offsetWidth;
     el.style.transform = 'translateX(0px)';
     done();
   },
   afterEnter(el) { // 动画进入完成之后的回调
     this.isshow = !this.isshow;
   }
}

定义动画过渡时长和样式：

.show{
	transition: all 0.4s ease;
}

目前来看舍近求远，一般不建议使用。

---

③使用v-for创建一个过渡列表

定义过渡样式：

<style>
  .list-enter,
  .list-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }
​
  .list-enter-active,
  .list-leave-active {
    transition: all 0.3s ease;
  }
</style>

定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

<div id="app">
  <input type="text" v-model="txt" @keyup.enter="add">
  <transition-group tag="ul" name="list">
    <li v-for="(item, i) in list" :key="i">{{item}}</li>
  </transition-group>
</div>

定义 VM 中的结构：

// 创建 Vue 实例，得到 ViewModel
 var vm = new Vue({
   el: '#app',
   data: {
     txt: '',
     list: [1, 2, 3, 4]
   },
   methods: {
     add() {
       this.list.push(this.txt);
       this.txt = '';
     }
   }
 });

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。

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

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