如图所示，总共有八个生命周期函数：
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
})
})
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
})
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
})
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: {},
})
引入动画类库后直接使用它的类名即可。
定义 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;
}
目前来看舍近求远，一般不建议使用。
定义过渡样式：
<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;
}