目录
定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：
要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。
今日任务
1.学习vue生命周期函数
2. 学习vue-resource的使用
3. 学习axios的使用
一、知识点
1、什么是生命周期
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
2、vue生命周期钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
生命周期函数=生命周期事件=生命周期钩子
3、vue生命周期
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="../vue-2.4.0.js"></script>
</head>
<body>
<div id='app'>
<div>{{msg}}</div>
<input type="text" v-model="msg">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg:"太难了,家人们",
},
methods: {
},
//生命周期
beforeCreate(){
//一般用于页面重定向
console.log('beforeCreate');
console.log(this.msg);
},
created(){
//一般用于接口请求，数据初始化
console.log('created');
console.log(this.msg);
},
beforMount(){
//页面数据未更新，在内存中已经解析好模板，虚拟dom，尚未挂载到页面，此时页面还是旧的
console.log('beforMount');
},
mounted(){
//页面更新完成，需要依赖dom的操作，在此完成
console.log('mounted');
},
beforeUpdate(){
//触发0次或多次，数据更新前
console.log("beforeUpdate");
console.log(this.msg);
},
updated(){
//数据更新后
console.log("updated");
console.log(this.msg);
},
//组件销毁前，清楚定时器还有页面监听
beforeDestroy(){
console.log('beforeDestroy');
},
destroyed(){
console.log('destroyed');
},
})
</script>
</body>
</html>4. vue-resource的使用
-
直接在页面中，通过script标签，引入vue-resource的脚本文件；
-
注意：引用的先后顺序是 - 先引用Vue的脚本文件，再引用vue-resource的脚本文件
-
示例：
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <script src="../vue-2.4.0.js"></script> <!-- 引用的先后顺序是 - 先引用Vue的脚本文件，再引用vue-resource的脚本文件 --> <script src="../vue-resource-1.3.4.js"></script> <style> img{ width: 100%; } ul{ display: flex; flex-wrap: wrap; } li{ width: 20%; padding: 10px; box-sizing: border-box; /* height: 120px; */ /* background-color: aqua; */ } </style> </head> <body> <div id='app'> <select name="" id=""> <option value="" v-for="(item,index) in subjectList" :key="index">{{item.title}}</option> </select> <div v-for="(item,index) in imgList" :key="index"> <img :src="item.imgUrlPc" alt=""> </div> <ul> <li v-for="(item,index) in courseList" :key="index"> <div><img :src="item.coverFileUrl" alt=""></div> <div>{{item.courseTitle}}</div> <div>免费</div> </li> </ul> </div> <script> const vm = new Vue({ el: '#app', data: { imgList:[], courseList:[], subjectList:[], }, methods: { }, created() { // 接口请求 数据初始化 // get this.$http.get("http://wkt.myhope365.com/weChat/applet/course/banner/list?number=3").then( (res)=>{ // console.log(res); this.imgList = res.data.data } ) // post this.$http.post("http://wkt.myhope365.com/weChat/applet/course/list/type",{type:'free',pageSize:10,pageNum:1},{ emulateJSON: true }).then((res)=>{ // console.log(res); this.courseList = res.data.rows }) // post json this.$http.post("http://wkt.myhope365.com/weChat/applet/subject/list",{"enable":1}).then((res)=>{ // console.log(res); this.subjectList = res.data.rows }) this.$http.post("http://wkt.myhope365.com/system/dict/data/list/open",{"dictType":'blogroll',pageNum:1,pageSize:10,orderByColumn:'dictSort',isAsc:'asc'},{ emulateJSON: true }).then((res)=>{ console.log(res); }) }, }) </script> </body> </html>5. axios的使用
-
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
-
示例：
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <script src="../vue-2.4.0.js"></script> <script src="../axios.js"></script> <style> ul{ display: flex; flex-wrap: wrap; } ul li{ width: 20%; padding: 10px; box-sizing: border-box; } img { width: 100%; height: 170px; } li { list-style: none; } </style> </head> <body> <div id='app'> <select name="" id=""> <option value="" v-for="(item,index) in subjectList" :key="index">{{item.title}}</option> </select> <div v-for="(item,index) in imgList" :key="index"> <img :src="item.imgUrlPc" alt=""> </div> <h3>免费课程</h3> <ul> <li v-for="(item,index) in courseList" :key="index"> <div><img :src="item.coverFileUrl" alt=""></div> <div>{{item.courseTitle}}</div> <div>免费</div> </li> </ul> <h3> 精品课程</h3> <ul> <li v-for="(item,index) in boutiqueCourseList" :key="index"> <div><img :src="item.coverFileUrl" alt=""></div> <div>{{item.courseTitle}}</div> <div v-if="item.isFree ==1">免费</div> <div v-else-if="item.isDiscount == 1">打折 <del>原价：{{item.coursePrice}} </del> 现价{{item.discountPrice}} </div> <div v-else>现价{{item.discountPrice}} </div> </li> </ul> <h3>限时折扣</h3> <ul> <li v-for="(item,index) in boutiqueList" :key="index"> <div><img :src="item.coverFileUrl" alt=""></div> <div>{{item.courseTitle}}</div> <div v-if="item.isFree ==1">免费</div> <div v-else-if="item.isDiscount == 1">打折 <del>原价：{{item.coursePrice}} </del> 现价{{item.discountPrice}} </div> <div v-else>现价{{item.discountPrice}} </div> </li> </ul> <h3>头条精选</h3> <ul> <li v-for="(item,index) in boutiqueList" :key="index"> <div><img :src="item.coverFileUrl" alt=""></div> <div>{{item.courseTitle}}</div> <div v-if="item.isFree ==1">免费</div> <!-- <div v-else-if="item.isDiscount == 1">打折 <del>原价：{{item.coursePrice}} </del> 现价{{item.discountPrice}} </div> <div v-else>现价{{item.discountPrice}} </div> --> </li> </ul> </div> <script> const vm = new Vue({ el: '#app', data: { imgList:[], courseList:[], subjectList:[], boutiqueCourseList:[], boutiqueList:[], dataList:[], }, methods: { }, created() { // get axios.get("http://wkt.myhope365.com/weChat/applet/course/banner/list?number=3").then((res) => { // console.log(res); this.imgList = res.data.data }) // post // 内置对象 let url = new URLSearchParams() // 参数一 属性名称，参数二 属性值 url.append('type','free') url.append('pageSize',10) url.append('pageNum',1) axios.post("http://wkt.myhope365.com/weChat/applet/course/list/type",url).then((res)=>{ // console.log(res); this.courseList = res.data.rows }) // 内置对象 let url2 = new URLSearchParams() // 参数一 属性名称，参数二 属性值 url2.append('type','boutique') url2.append('pageSize',5) url2.append('pageNum',1) axios.post("http://wkt.myhope365.com/weChat/applet/course/list/type",url2).then((res)=>{ // console.log(res); this.boutiqueCourseList = res.data.rows }) axios.post("http://wkt.myhope365.com/weChat/applet/subject/list",{"enable":1}).then((res)=>{ // console.log(res); this.subjectList = res.data.rows }) let url3 = new URLSearchParams() url3.append('type','discount') url3.append('pageNum',1) url3.append('pageSize',5) axios.post("http://wkt.myhope365.com/weChat/applet/course/list/type",url3).then((res)=>{ // console.log(res); this.boutiqueList = res.data.rows }) let url4 = new URLSearchParams() url4.append('type','boutique') url4.append('pageSize',5) url4.append('pageNum',1) axios.post("http://wkt.myhope365.com/weChat/applet/course/list/type",url2).then((res)=>{ // console.log(res); this.dataList = res.data.rows }) }, }) </script> </body> </html>6.Vue中的动画
-
6.1 使用过渡类名
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <script src="../vue-2.4.0.js"></script> <style> /* @keyframes identifier { } */ /* 入场动画 */ .v-enter{ transform: translateX(200px); opacity: 0; } .v-enter-active{ transition: 1s all; } .v-enter-to{ transform: translateX(0px); } /* 离场动画 */ .v-leave{ transform: translateX(0px); } .v-leave-active{ transition:1s all; } .v-leave-to{ transform: translateX(200px); } /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */ .fade-enter-active, .fade-leave-active{ transition: all 0.2s ease; position: absolute; } /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */ .fade-enter, .fade-leave-to { opacity: 0; transform: translateX(); } </style> </head> <body> <div id='app'> <button @click="flag=!flag">更改显示模式</button> <!-- 没有name都用v开头的6个类名 --> <transition> <div v-if="flag">天蝎座</div> </transition> <!-- 定义name后，设置动画，把v换成name --> <transition name="fade"> <div v-if="flag">处女座</div> </transition> </div> <script> const vm = new Vue({ el: '#app', data: { flag:true }, methods: { } }) </script> </body> </html>6.2 使用第三方css动画库
-
导入动画类库：
-
<link rel="stylesheet" type="text/css" href="./lib/animate.css">
-
定义 transition 及属性：
-
<transition enter-active-class="animate__fadeInBottomRight" leave-active-class="animate__fadeOutTopLeft" > <div v-if="flag" class="animate__animated"> 哈哈</div> </transition>6.3 使用动画钩子函数
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <script src="../vue-2.4.0.js"></script> <style> .show{ transition: all 2s; } </style> </head> <body> <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> <script> const vm = new Vue({ el: '#app', data: { isshow: true }, methods: { beforeEnter(el) { // 动画进入之前的回调 console.log(el); el.style.transform = 'translateX(500px)'; }, enter(el, done) { // 动画进入完成时候的回调 console.log(done); el.offsetWidth; el.style.transform = 'translateX(0px)'; done(); }, afterEnter(el) { // 动画进入完成之后的回调 // console.log("3333"); this.isshow = !this.isshow; } } }) </script> </body> </html>6.4 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 = '';
}
}
}); -
6.5 列表的排序过渡
<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。
要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。
v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：
.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}
6.6vue中的列表动画
示例：
目录
定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：
要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
