vue基础-day03
一、生命周期
a、什么是生命周期
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
b、vue生命周期钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
生命周期函数=生命周期事件=生命周期钩子
c、vue生命周期
代码实例：
<html lang="en">
<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>Documenttitle>
<script src="./vue-2.4.0.js">script>
<body>
<div>{{num}}div>
<input type="text" v-model:value='num'>
div>
<script>
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {
num:124,
},
methods: {},
// 生命周期：
// 从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
// 生命周期函数=生命周期事件=生命周期钩子
// 表示实例完全被创建出来之前，会执行它，
// 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
//用于重新跳转页面，比如换新的网址是，会直接从原来的页面跳到新的页面
beforeCreate(){
console.log("这个是beforeCreate");
console.log(this.num);//created
},
// data 和 methods 都已经被初始化好了！
// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
//用于请求接口和数据的初始化
created(){
console.log("这个是created");
console.log(this.num);
},
// 表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
// 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
beforeMount(){
console.log("只是翻译的模板放到了内存中，并没有渲染到页面");
},
// 表示 内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
// 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
mounted(){
console.log("渲染到了页面");
},
// 这时候，表示 我们的界面还没有被更新
beforUpdate(){
console.log("更新之前");
},
// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
// 用于类似于计算器的输入数值随时更新计算结果
updated(){
console.log("更新之后");
},
//销毁之前
beforeDestory(){
},
//销毁之后
destroyed(){
}
});
script>
body>
html>
二. vue-resource的使用(vue1.X)
get请求和post请求代码实例
<html lang="en">
<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>Documenttitle>
<script src="./vue-2.4.0.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<script src="./vue-resource-1.3.4.js">script>
<style>
.box {
width: 1200px;
margin: auto;
display: flex;
/* 在弹性盒对象的 元素中的各项中间留有空白： */
justify-content: space-between;
/* 在弹性盒对象的 元素中的各项周围留有空白： */
/* justify-content: space-around; */
/* 让弹性盒元素在必要的时候拆行： */
flex-wrap: wrap;
}
.course {
width: 20%;
/* padding-right: 20px; */
height: 180px;
background-color: aqua;
}
.courseImg {
height: 100px;
}
style>
<body>
<div v-for="(item,index) in imgList" :key="item.id">
<img :src="item.imgUrlPc" alt="">
div>
<div class="box">
<div class="course" v-for="(item,index) in courseList" :key="item.id">
<dl>
<dt><img class="courseImg" alt="" :src="item.coverFileUrl">dt>
<dt>vue全家桶从入门到实战dt>
<dt>共23节课|234人报名dt>
<dt>免费dt>
dl>
div>
div>
div>
<script>
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {
imgSrc:"",
imgList:[],
courseList:[],
},
methods: {},
created(){
// 接口请求。数据初始化
//get请求
this.$http.get("http://wkt.myhope365.com/weChat/applet/course/banner/list?number=4"
).then(res=>{
console.log(res);
console.log(res.body.data);
this.imgList=res.body.data;
console.log(res.body.data);
});
//post请求
this.$http.post("http://wkt.myhope365.com/weChat/applet/course/list/type",
{ type: "free", pageNum: 1, pageSize: 10 },
// vue1.X的post请求有第三个参数
{ emulateJSON: true }).then((res=>{
console.log(res);
this.courseList=res.body.rows;
}))
}
});
script>
body>
html>
三、axios的使用
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中
get请求和post请求代码示例：
<html lang="en">
<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>Documenttitle>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<style>
.box {
width: 1200px;
margin: auto;
display: flex;
/* 在弹性盒对象的 元素中的各项中间留有空白： */
justify-content: space-between;
/* 在弹性盒对象的 元素中的各项周围留有空白： */
/* justify-content: space-around; */
/* 让弹性盒元素在必要的时候拆行： */
flex-wrap: wrap;
}
.course {
width: 20%;
/* padding-right: 20px; */
height: 180px;
background-color: aqua;
}
.courseImg {
height: 100px;
}
style>
<body>
<div v-for="(item,index) in imgList" :key="item.id">
<img :src="item.imgUrlPc" alt="" />
div>
<div class="box">
<div class="course" v-for="(item,index) in courseList" :key="item.id">
<dl>
<dt><img class="courseImg" alt="" :src="item.coverFileUrl">dt>
<dt>2351dt>
<dt>2351dt>
<dt>2351dt>
dl>
div>
div>
div>
div>
<script>
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {
imgSrc:"",
imgList:[],
courseList:[],
},
methods: {},
created(){
axios.get("http://wkt.myhope365.com/weChat/applet/course/banner/list?number=4"
).then((res)=>{
console.log(res);
this.imgList=res.data.data;
})
// form参数类型
// 新建一个FormData()对象
let form=new FormData();
// let form = new URLSearchParams();
// 添加属性 append
form.append("type","free");
form.append("pageSize", 10);
form.append("pageNum", 1);
//post接口
axios.post(
"http://wkt.myhope365.com/weChat/applet/course/list/type",
form
).then((res)=>{
console.log(res);
this.courseList=res.data.rows;
})
}
});
script>
body>
html>
四、Vue中的动画
1 、使用过渡类名
HTML结构：
<div id="app">
<input type="button" value="动起来" @click="myAnimate">
<transition name="fade">
<div v-show="isshow">动画哦div>
transition>
div>
VM 实例：
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
isshow: false
},
methods: {
myAnimate() {
this.isshow = !this.isshow;
}
}
});
定义两组类样式：
/* 定义进入和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease;
position: absolute;
}
/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
2、 使用第三方css动画库
导入动画类库：
定义 transition 及属性：
<transition
enter-active-class="fadeInRight"
leave-active-class="fadeOutRight"
:duration="{ enter: 500, leave: 800 }">
<div class="animated" v-show="isshow">动画哦div>
transition>
3、 使用动画钩子函数
定义 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">OKdiv>
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;
}
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 = '';
}
}
});
5、 列表的排序过渡
组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。
v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：
v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}