Vue第三天
阿新 • • 發佈：2022-03-23
1、什麼是生命週期
從Vue例項建立、執行、到銷燬期間，總是伴隨著各種各樣的事件，這些事件，統稱為生命週期！
2、vue生命週期鉤子函式
每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的程式碼的機會。生命週期函式=生命週期事件=生命週期鉤子
3、vue生命週期
beforeCreat：剛初始化一個空的例項物件，在其生命週期執行時data和methods中的資料還沒有初始化
created：data和methods已經初始化完成
beforeMount：此函式執行時，模板已經在記憶體中編譯好了，但尚未掛載到頁面中去，但是此時頁面還是舊的
mounted：只要執行完了mounted，就表示整個Vue例項已經初始化完畢了，此時，元件已經脫離了建立階段，進入到了執行階段
beforeUpdate：當執行時，頁面中顯示的資料還是舊的，頁面尚未和最新的資料保持同步
update：當執行時，頁面已經和資料保持同步
beforeDestroy：當執行beforeDestroy鉤子函式時Vue例項就已經從執行階段進入到銷燬階段，但當執行此階段時，還沒有真正進行銷燬的過程
destroyed：元件已經完全被銷燬了
<!DOCTYPE html> <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>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="button" value="修改msg" @click="msg='No'"> <h3 id="h3">{{ msg }}</h3> </div> <script> // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: 'ok' }, methods: { show() { console.log('執行了show方法') } }, beforeCreate() { // 這是我們遇到的第一個生命週期函式，表示例項完全被創建出來之前，會執行它 // console.log(this.msg) // this.show() // 注意： 在 beforeCreate 生命週期函式執行的時候，data 和 methods 中的 資料都還沒有沒初始化 }, created() { // 這是遇到的第二個生命週期函式 // console.log(this.msg) // this.show() // 在 created 中，data 和 methods 都已經被初始化好了！ // 如果要呼叫 methods 中的方法，或者操作 data 中的資料，最早，只能在 created 中操作 }, beforeMount() { // 這是遇到的第3個生命週期函式，表示 模板已經在記憶體中編輯完成了，但是尚未把 模板渲染到 頁面中 // console.log(document.getElementById('h3').innerText) // 在 beforeMount 執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字串 }, mounted() { // 這是遇到的第4個生命週期函式，表示，記憶體中的模板，已經真實的掛載到了頁面中，使用者已經可以看到渲染好的頁面了 // console.log(document.getElementById('h3').innerText) // 注意： mounted 是 例項建立期間的最後一個生命週期函式，當執行完 mounted 就表示，例項已經被完全建立好了，此時，如果沒有其它操作的話，這個例項，就靜靜的 躺在我們的記憶體中，一動不動 }, // 接下來的是執行中的兩個事件 beforeUpdate() { // 這時候，表示 我們的介面還沒有被更新【資料被更新了嗎？ 資料肯定被更新了】 /* console.log('介面上元素的內容：' + document.getElementById('h3').innerText) console.log('data 中的 msg 資料是：' + this.msg) */ // 得出結論： 當執行 beforeUpdate 的時候，頁面中的顯示的資料，還是舊的，此時 data 資料是最新的，頁面尚未和 最新的資料保持同步 }, updated() { console.log('介面上元素的內容：' + document.getElementById('h3').innerText) console.log('data 中的 msg 資料是：' + this.msg) // updated 事件執行的時候，頁面和 data 資料已經保持同步了，都是最新的 } }); </script> </body> </html>
5. axios的使用
Vue.js 2.0 版本推薦使用 axios 來完成 ajax 請求。
Axios 是一個基於 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
GET請求
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試例項</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> </head> <body> <div id="app"> {{ info }} </div> <script type = "text/javascript"> new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('https://www.runoob.com/try/ajax/json_demo.json') .then(response => (this.info = response)) .catch(function (error) { // 請求失敗處理 console.log(error); }); } }) </script> </body> </html>
POST請求
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試例項</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> </head> <body> <div id="app"> {{ info }} </div> <script type = "text/javascript"> new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .post('https://www.runoob.com/try/ajax/demo_axios_post.php') .then(response => (this.info = response)) .catch(function (error) { // 請求失敗處理 console.log(error); }); } }) </script> </body> </html>
6、使用過度類名
<div id="app"> <input type="button" value="動起來" @click="myAnimate"> <!-- 使用 transition 將需要過渡的元素包裹起來 --> <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); }
使用動畫鉤子函式
定義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">OK</div> </transition> </div> 例項化Vue方法 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; }