一、生命周期
1、什么是生命周期？
从vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。
// beforeCreate（创建前）：data中的数据,methods中的方法，还没有被创建，一般用于对象的重定向。
beforeCreate() {
console.log(this.msg); //undefined
console.log('beforeCreate');
},
// created（创建后）：初始化已经完成，第一个可以操作data，methods的生命周期，一般用于接口请求和数据可视化。
created() {
console.log(this.msg); //今天有点困~~~~
console.log('created');
},
// beforeMount（载入前）：对应的钩子函数是beforeMount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，
// 下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过滤性的，一般一个项目只用到一两次（挂载的虚拟DOM）
beforeMount() {
console.log(this.msg); //今天有点困~~~~
console.log('beforeMount');
// debugger ⭐ 打断点用的
},
// monuted（载入后）：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作 //真实的DOM，第一个操作DOM元素的生命周期
mounted() {
console.log(this.msg); //今天有点困~~~~
console.log('mounted');
},
// 可以执行0次或者多次
// data中的数据是最新的，页面中还是旧的
beforeUpdate() {
console.log(this.msg);
console.log('beforeUpdate');
},
// updated（更新后）：可以执行0次或者多次，data和页面中的都是最新的数据
updated() {
console.log(this.msg);
console.log('updated');
},
// beforeDestroy（销毁前）：清除定时器、以及页面监听；解绑自定义事件、取消订阅消息等收尾工作
// 在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不再需要vue操作DOM时，就需要销毁Vue，也就是清楚vue实例与DOM的关联，
// 调用destroy方法可以销毁当前组件。在销毁前会触发beforeDestroy钩子函数。
beforeDestrory() {
console.log(this.msg); //拿不到
console.log('beforeDestrory'); //拿不到
},
// destroyed（销毁后）：销毁完成；
destrory(){
console.log(this.msg); //拿不到
console.log('destrory'); //拿不到
}
2、Vue-resource的使用
注意：vue-resource只在低版本使用，引用的先后顺序是 - 先引用Vue的脚本文件，再引用vue-resource的脚本文件
1、get请求
getInfo() { // get 方式获取数据
this.$http.get('http://yapi.shangyuninfo.com/mock/36/web02/category').then(res => {
console.log(res.body);
})
}
2、post请求
postInfo() {
var url = ' http://yapi.shangyuninfo.com/mock/36/web02/list/goods/category';
// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, {categoryId: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}
3、axios的使用
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
cdn地址：
请求头：
1、请求头为：‘application/x-www-form-urlencoded’
let url = new URLSearchParams()
url.append('type', type)
url.append('pageSize', pageSize)
url.append('pageNum', pageNum)
2、请求头为：‘application/json’
默认为’application/json’
3、请求头为：‘multipart/form-data’
let url = new FormData()
url.append('key', 'value')
案例：
methods: {
getData(type='free', pageSize=10, pageNum=1) {
let url = new URLSearchParams()
url.append('type', type)
url.append('pageSize', pageSize)
url.append('pageNum', pageNum)
return axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', url)
}
},
created() {
// 课程分类
axios.post('http://wkt.shangyuninfo.cn/weChat/applet/subject/list', {
enable: 1,
}).then(res => {
// console.log(res);
this.courseList = res.data.rows
})
// 轮播图
axios.get('http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=5',).then(res => {
this.imgList = res.data.data
// console.log(res);
this.$nextTick(() => {
// console.log(res.data.data);
var mySwiper = new Swiper('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
})
})
//免费课程
// axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type',url)
console.log(this.getData());
this.getData('free',10,1).then(res=>{
// console.log(res);
this.imgFreeList=res.data.rows
})
// 精品课程
this.getData('boutique',5).then(res=>{
console.log(res);
this.imgBoutiqueList=res.data.rows
})
// 限时折扣课程
this.getData('discount',5).then(res=>{
console.log(res);
this.discountList=res.data.rows
})
// 底部链接
let url = new URLSearchParams()
url.append('dictType', 'blogroll')
url.append('pageNum', 1)
url.append('pageSize', 10)
url.append('orderByColumn', 'dictSort')
url.append('isAsc', 'asc')
axios.post('http://wkt.shangyuninfo.cn/system/dict/data/list/open', url).then(res => {
console.log(res);
this.downList=res.data.rows
})
},
4、Vue中的动画
/* 进入 */
.v-enter{
transform: translateX(300px);
}
/* 进入到 */
.v-enter-to{
transform: translateX(0);
}
/* 进入-->进入到的过渡 */
.v-enter-active{
transition: all 10s;
}
/* 离开 */
.v-leave{
transform: translateX(0);
}
/* 离开到 */
.v-leave-to{
transform: translateX(-300px);
}
/* 离开-->离开到的过渡 */
.v-leave-active{
transition: all 10s;
}
/* 自定义name */
.msg-enter{
transform: translate(-400px);
}
.msg-enter-to{
transform: translate(0);
}
.msg-enter-active{
transition: all 10s;
}
.msg-leave{
transform: translateX(0);
}
.msg-leave-to{
transform: translateX(400px);
}
.msg-leave-active{
transition: all 10s;
}
<div id='app'>
<button @click="flag = !flag">点击一下</button>
<transition>
<div v-show="flag">{{msg}}</div>
</transition>
//自定义name
<transition name="msg">
<div v-show="flag">变化慢一点</div>
</transition>
</div>
5、第三方CSS动画库
cdn地址：
案例：
<button @click="flag = !flag">点击一下</button>
<transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeInLeftBig"
leave-active-class="animate__animated animate__bounceInDown">
<p v-show="flag">今晚早点睡~~~~</p>
</transition>
<transition name="custom-classes-transition" enter-active-class="animate__animated animate__backInLeft"
leave-active-class="animate__animated animate__backInUp">
<p v-show="flag">今晚早点睡~~~~</p>
</transition>
<transition name="custom-classes-transition" enter-active-class="animate__animated animate__backOutDown"
leave-active-class="animate__animated animate__bounceInRight">
<p v-show="flag">今晚早点睡~~~~</p>
</transition>
<transition name="custom-classes-transition" enter-active-class="animate__animated animate__bounceOutDown"
leave-active-class="animate__animated animate__lightSpeedInLeft">
<p v-show="flag">今晚早点睡~~~~</p>
</transition>
6、动画钩子函数
style里的：
.showObj{
transition: all 4s ease;
}
body里的：
<input type="button" value="切换动画" @click="show = !show">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div v-if="show" class="showObj">~~~~~~~~~~~~</div>
</transition>
<transition @before-enter="beforeLeave" @enter="leave" @after-enter="afterLeave">
<div v-if="show" class="showObj">~~~~~~~~~~~~</div>
</transition>
vue实例里的：
methods: {
beforeEnter(el){ //动画进入之前的回调 进入之前
console.log(el);
el.style.transform = 'translateX(800px)';
},
enter(el,done){ 动画进入完成时候的回调 进入
el.offsetWidth; // 必须要加的
el.style.transform='translateX(0)'
done()
// console.log(done);
},
afterEnter(el){ //动画进入完成之后的回调
//this.show = !this.show
},
beforeLeave(el){ //动画离开之前的回调 离开之前
// console.log(el);
el.style.transform = 'translateX(-800px)';
},
leave(el,done){ 动画离开完成时候的回调 离开
el.offsetWidth; // 必须要加的
el.style.transform='translateX(0)'
done()
// console.log(done);
},
afterLeave(el){ //动画进入完成之后的回调
//this.show = !this.show
},
}
7、transition-group
案例：
style里的：
<style>
#app{
margin: auto;
width: 800px;
}
.v-enter{
transform: translateX(500px);
}
.v-enter-to{
transform: translateX(0);
}
.v-enter-active{
transition: all 5s;
}
.v-leave{
transform: translateX(0);
}
.v-leave-to{
transform: translateX(-500px);
}
.v-leave-active{
transition: all 5s;
}
.v-move {
transition: all 2s ease;
}
.v-leave-active {
position: absolute;
}
.v-enter-active {
position: absolute;
}
</style>
body里的：
<div id='app'>
<button @click="flag = !flag">点击一下</button>
<button @click="add">push</button>
<transition-group tag="ul">
<li v-for="(item,index) in list" :key="index" v-show="flag">{{item}}</li>
</transition-group>
</div>
script里的：
<script>
const vm = new Vue({
el: '#app',
data: {
flag:true,
list:[1,2,3,4,5,6,]
},
methods: {
add(){
添加list元素
// this.list.push(this.list[this.list.length-1]+1)
this.list.push(this.list[this.list.length - 1] + 1)
}
}
})
</script>
时间：12.28
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
