10-vue(叁)
1. 生命周期
生命周期就是vue实例在创建、运行、销毁的整体过程
1.1 生命周期钩子函数
{{item}}
2. vue-resource
vue-resource是依赖于vue的接口请求方法，是在vue1.0版本支持的方法
created() {
//get请求
//一个参数：地址；传参需要在地址后用？拼接
this.$http.get('http://wk.myhope365.com/weChat/applet/course/banner/list?number=3').then(res => {
console.log(res);
});
//post请求
//此时服务器要求的请求体格式为form-Data
//三个参数1.url 2.对象，内容为请求体 3.{ emulateJSON: true }
this.$http.post('http://wk.myhope365.com/weChat/applet/course/list/type',
{ type: 'free', pageNum: 1, pageSize: 10 },
{ emulateJSON: true }).then(res => {
// console.log(res);
});
//post请求
//此时服务器要求的请求体格式为JSON
//两个参数1.url 2.JSON对象
this.$http.post('http://wk.myhope365.com/weChat/applet/subject/list',
{ 'enable': 1 }).then(res => {
console.log(res);
})
},
3. axios
axios与vue无关，它是基于 Promise 的 HTTP 库
created() {
//get请求
//一个参数：url；参时在url后？拼接
axios.get('http://wk.myhope365.com/weChat/applet/course/banner/list?number=4').then(res => {
this.rollImgList = res.data.data;
});
function createFormat(type, pNum, pSize) {
let format = new FormData();
format.append("type", type);
format.append("pageNum", pNum);
format.append("pageSize", pSize);
return format;
}
//post请求
//两个参数：1.url 2.请求体需要为form—Data需要new FormData()对象传入
axios.post('http://wk.myhope365.com/weChat/applet/course/list/type',
createFormat("free", 1, 10)).then(res => {
this.freeCourseList = res.data.rows;
});
},
4.动画
4.1 transition实现动画
首先创建新标签transition；没有name属性是默认使用以下类名控制动画效果，有name属性时，用name名替换v
Animate.css官方网站
引入线上地址
3.0版本
4.0版本
1. 使用方法
仅需要引入类名即可4.0版本要求要有animate__前缀
An animated element
An animated element
2. 动画钩子函数
个人觉得用处不大，简单说就是在动画各个执行阶段执行的函数。对照这个理解
进入
离开
4.3 v-for列表的过度
使用transition-group标签；tag属性会将transition-group渲染成tag指定的html标签
{{item}}