Vue生命周期

1、什么是生命周期

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

2、vue生命周期钩子函数

每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期函数=生命周期事件=生命周期钩子

3、vue生命周期

1.beforeCreate()

这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
注意：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的数据都还没有没初始化

2.create()

这是遇到的第二个生命周期函数,在 created 中，data 和 methods 都已经被初始化好了！
如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作

3.beforeMount()

这是遇到的第3个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串

4.mounted()

这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
注意： mounted 是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动

接下来的是运行中的两个事件

5.beforeUpdate()

这时候，表示我们的界面还没有被更新【数据被更新了吗？数据肯定被更新了】
得出结论：当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和最新的数据保持同步

6.updated()

事件执行的时候，页面和 data 数据已经保持同步了，都是最新的

7.beforeDestroy()

执行此函数时，Vue实例已经从运行阶段，进入到了销毁阶段
当执行 beforeDestroy的时候，实例上data和所有的methods，以及过滤器，指令… 都还处于可用状态，此时还没有真正执行销毁的过程

8.destroyed()

当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器。。。都已经不可用了

axios

一、vue-resource的使用

直接在页面中，通过script标签，引入vue-resource的脚本文件；
注意：引用的先后顺序是-先引用Vue的脚本文件，再引用vue-resource的脚本
文件

get请求

this.$http.get(`${this.beforeurl}/weChat/applet/course/banner/list?number=3`).then((res)=>{}),

post请求

使用vue-resource时post请求有三个参数 url，请求体参数，参数配置

                    // post   三个参数  url，请求体参数，参数配置this.$http.post(`${this.beforeurl}/weChat/applet/course/list/type`, {type: "free",pageNum: 1,pageSize: 5}, {emulateJSON: true}).then((res) => {// console.log(res);this.courseList = res.body.rows})

二、axios的使用

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

安装方法

使用cdn:<scriptsrc=“https://unpkg.com/axios/dist/axios.min.js”>
或
<scriptsrc=“https://cdn.staticfile.org/axios/0.18.0/axios.min.js”>
使用npm:
npminstallaxios

1.get请求

axios.get(`${this.beforeurl}/weChat/applet/course/banner/list?number=3`).then((res) => {this.imgList = res.data.data})

2.post请求

axios.post(`${this.beforeurl}/weChat/applet/course/list/type`, form).then((res) => {this.courseList = res.data.rows})

动画

1.使用过渡类名

HTML结构

<divid="app">
<input type="button"value="动起来"@click="myAnimate">
<!--使用transition将需要过渡的元素包裹起来-->
<transitionname="fade">
<div v-show="isshow">动画哦</div>
</transition>
</div>

VM实例

//创建Vue实例，得到ViewModel
varvm=newVue({el:'#app',
data:{isshow:false
},
methods:{myAnimate(){this.isshow=!this.isshow;
}
}
});

定义两组类样式：

/*定义进入和离开时候的过渡状态*/
.fade-enter-active,
.fade-leave-active{transition:all0.2sease;
position:absolute;
}

/*定义进入过渡的开始状态和离开过渡的结束状态*/
.fade-enter,
.fade-leave-to{opacity:0;
transform:translateX(100px);
}

2.使用第三方css动画库

导入动画类库：

<linkrel="stylesheet"type="text/css"href="./lib/animate.css">

定义transition及属性：

<transition
enter-active-class="fadeInRight"
leave-active-class="fadeOutRight"
:duration="{enter:500,leave:800}">
<divclass="animated"v-show="isshow">动画哦</div>
</transition>

3.使用动画钩子函数

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

<divid="app">
<inputtype="button"value="切换动画"@click="isshow=!isshow">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<divv-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:all0.4sease;
}

4.v-for的列表过渡

定义过渡样式：

<style>
.list-enter,
.list-leave-to{opacity:0;
transform:translateY(10px);
}

.list-enter-active,
.list-leave-active{transition:all0.3sease;
}
</style>

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

<divid="app">
<inputtype="text"v-model="txt"@keyup.enter="add">
<transition-grouptag="ul"name="list">
<liv-for="(item,i)inlist":key="i">{{item}}</li>
</transition-group>
</div>

定义VM中的结构：

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

5.列表的排序过渡

组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的v-move特性，它会在元素的改变定位的过程中应用。
v-move和v-leave-active结合使用，能够让列表的过渡更加平缓柔和：

.v-move{transition:all0.8sease;
}
.v-leave-active{position:absolute;
}