vue生命週期和vue請求+動畫
阿新 • • 發佈：2022-03-23
一、知識點
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="./lib/vue-2.4.0.js"></script> </head> <body> <div id='app'> {{msg}} <input type="text" v-model="msg"> </div> <script> const vm = new Vue({ el: '#app', data: { msg: 'hello' }, methods: {}, //生命週期 beforeCreate() { //用於頁面的重定向 console.log('beforeCreat'); console.log(this.msg); }, created() { //一般用於介面請求 console.log('created'); console.log(this.msg); }, beforeMount() { //頁面資料未更新，在記憶體中已經解析好模板，虛擬的domconsole.log('beforeMount'); }, mouted() { //頁面更新完成，需要依賴dom的操作，在此完成 console.log('mouted'); }, beforeUpdate() { //觸發0次或者多次 console.log('beforeUpdate'); console.log(this.msg); }, updated() { //資料更新後 console.log('updated'); }, beforeDestroy() { // 元件銷燬前，清除定時器還有頁面監聽 console.log('beforeDestroy'); }, destroyed() { // 元件銷燬後 console.log('destroyed'); }, }) </script> </body> </html>
4. vue-resource的使用
直接在頁面中，通過script標籤，引入vue-resource的指令碼檔案；
注意：引用的先後順序是 - 先引用Vue的指令碼檔案，再引用vue-resource的指令碼檔案
GET請求
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請求
created() {
//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
})
}
5. axios的使用
Vue.js 2.0 版本推薦使用 axios 來完成 ajax 請求。
Axios 是一個基於 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
GET請求
created() {
axios.get("http://wkt.myhope365.com/weChat/applet/course/banner/list?number=3").then((res) => {
// console.log(res);
this.imgList = res.data.data
});
}
POST請求
created() {
axios.post("http://wkt.myhope365.com/weChat/applet/subject/list", {
"enable": 1
}).then((res) => {
// console.log(res);
this.subjectList = res.data.rows
});
}
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="./lib/vue-2.4.0.js"></script> <style> /* 進場動畫 */ .v-enter { transform: translateX(200px); font-size: 50px; } .v-enter-active { transition: 1s all; } .v-enter-to { transform: translateX(0); } /* 離場動畫 */ .v-leave { transform: translateX(0); } .v-leave-active { transition: 1s all; } .v-leave-to { transform: translateX(200px); } /* 定義進入和離開的過渡 */ .fade-enter-active, .fade-leave-active { transition: 1s all; position: absolute; } /* 定義進入過渡的開始狀態 和 離開過渡的結束狀態 */ .fade-enter, .fade-leave-to { opacity: 0; transform: translateX(100px); } </style> </head> <body> <div id='app'> <button @click="flag=!flag">更換</button> <!-- 沒有name的就是6個類名 --> <transition> <div v-show="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動畫庫
<!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> <!-- 1.引入 --> <link rel="stylesheet" href="./animate.min.css"> </head> <body> <div id='app'> <h1 class="animate__animated animate__bounce">An animated element</h1> <button @click="flag=!flag"> 點我</button> <transition enter-active-class="animate__bounceInDown" leave-active-class="animate__rotateOutDownLeft"> <div v-if="flag" class="animate__animated"> 哈哈</div> </transition> </div> <script> const vm = new Vue({ el: '#app', data: { flag: true }, methods: {}, }) </script> </body> </html>
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 特性，它會在元素的改變定位的過程中應用。
<!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; font-size: 50px; } .v-enter-active { transition: 1s all; } .v-enter-to { transform: translateX(0px); } /* 離場動畫 */ .v-leave { transform: translateX(0px); /* font-size: 50px; */ } .v-leave-active { transition: 1s all; } .v-leave-to { transform: translateX(200px); font-size: 50px; } /* 定義進入和離開時候的過渡狀態 */ .fade-enter-active, .fade-leave-active { transition: all 0.2s ease; position: absolute; } /* 定義進入過渡的開始狀態 和 離開過渡的結束狀態 */ .fade-enter, .fade-leave-to { opacity: 0; transform: translateX(100px); } /* v-move 和 v-leave-active 結合使用，能夠讓列表的過渡更加平緩柔和： */ /* .v-move { transition: all 0.8s ease; } .v-leave-active { position: fixed; } */ </style> </head> <body> <div id='app'> <button @click="flag=!flag"> 更改顯示模式 </button> <button @click="deleteList"> 刪除</button> <input type="text" v-model="txt" @keyup.enter="add"> <transition-group tag="ul"> <li v-show="flag" v-for="(item, i) in list" :key="i">{{item}}</li> </transition-group> </div> <script> const vm = new Vue({ el: '#app', data: { flag: true, txt: '', list: [1, 2, 3, 4] }, methods: { add() { this.list.push(this.txt); this.txt = ''; }, deleteList() { this.list.splice(0, 1) } }, }) </script> </body> </html>