Vue.js - Day2
vue實例的生命週期
- 什麼是生命週期：從Vue實例創建、運行、到銷燬期間，總是伴隨着各種各樣的事件，這些事件，統稱爲生命週期！
- 生命週期鉤子：就是生命週期事件的別名而已；
- 生命週期鉤子 = 生命週期函數 = 生命週期事件
- 主要的生命週期函數分類：
- 創建期間的生命週期函數：
- beforeCreate：實例剛在內存中被創建出來，此時，還沒有初始化好 data 和 methods 屬性
- created：實例已經在內存中創建OK，此時 data 和 methods 已經創建OK，此時還沒有開始 編譯模板
- beforeMount：此時已經完成了模板的編譯，但是還沒有掛載到頁面中
- mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示
- 運行期間的生命週期函數：
- beforeUpdate：狀態更新之前執行此函數， 此時 data 中的狀態值是最新的，但是界面上顯示的 數據還是舊的，因爲此時還沒有開始重新渲染DOM節點
- updated：實例更新完畢之後調用此函數，此時 data 中的狀態值 和 界面上顯示的數據，都已經完成了更新，界面已經被重新渲染好了！
- 銷燬期間的生命週期函數：
- beforeDestroy：實例銷燬之前調用。在這一步，實例仍然完全可用。
- destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷燬。
- HTML 代碼結構
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div>
- Vue實例：
<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>
vue-resource 實現 get, post, jsonp請求
除了 vue-resource 之外，還可以使用 axios 的第三方包實現實現數據的請求
- 之前的學習中，如何發起數據請求？
- 常見的數據請求類型？ get post jsonp
- 測試的URL請求資源地址：
- get請求地址： http://vue.studyit.io/api/getlunbo
- post請求地址：http://vue.studyit.io/api/post
- jsonp請求地址：http://vue.studyit.io/api/jsonp
- JSONP的實現原理
- 由於瀏覽器的安全性限制，不允許AJAX訪問 協議不同、域名不同、端口號不同的 數據接口，瀏覽器認爲這種訪問不安全；
- 可以通過動態創建script標籤的形式，把script標籤的src屬性，指向數據接口的地址，因爲script標籤不存在跨域限制，這種數據獲取方式，稱作JSONP（注意：根據JSONP的實現原理，知曉，JSONP只支持Get請求）；
- 具體實現過程：
- 先在客戶端定義一個回調方法，預定義對數據的操作；
- 再把這個回調方法的名稱，通過URL傳參的形式，提交到服務器的數據接口；
- 服務器數據接口組織好要發送給客戶端的數據，再拿着客戶端傳遞過來的回調方法名稱，拼接出一個調用這個方法的字符串，發送給客戶端去解析執行；
- 客戶端拿到服務器返回的字符串之後，當作Script腳本去解析執行，這樣就能夠拿到JSONP的數據了；
- 帶大家通過 Node.js ，來手動實現一個JSONP的請求例子；
const http = require('http');
// 導入解析 URL 地址的核心模塊
const urlModule = require('url');
const server = http.createServer();
// 監聽 服務器的 request 請求事件，處理每個請求
server.on('request', (req, res) => {
const url = req.url;
// 解析客戶端請求的URL地址
var info = urlModule.parse(url, true);
// 如果請求的 URL 地址是 /getjsonp ，則表示要獲取JSONP類型的數據
if (info.pathname === '/getjsonp') {
// 獲取客戶端指定的回調函數的名稱
var cbName = info.query.callback;
// 手動拼接要返回給客戶端的數據對象
var data = {
name: 'zs',
age: 22,
gender: '男',
hobby: ['喫飯', '睡覺', '運動']
}
// 拼接出一個方法的調用，在調用這個方法的時候，把要發送給客戶端的數據，序列化爲字符串，作爲參數傳遞給這個調用的方法：
var result = `${cbName}(${JSON.stringify(data)})`;
// 將拼接好的方法的調用，返回給客戶端去解析執行
res.end(result);
} else {
res.end('404');
}
});
server.listen(3000, () => {
console.log('server running at http://127.0.0.1:3000');
});
- vue-resource 的配置步驟：
- 直接在頁面中，通過
script標籤，引入vue-resource的腳本文件； - 注意：引用的先後順序是：先引用
Vue的腳本文件，再引用vue-resource的腳本文件；
- 發送get請求：
getInfo() { // get 方式獲取數據
this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
console.log(res.body);
})
}
- 發送post請求：
postInfo() {
var url = 'http://127.0.0.1:8899/api/post';
// post 方法接收三個參數：
// 參數1： 要請求的URL地址
// 參數2： 要發送的數據對象
// 參數3： 指定post提交的編碼類型爲 application/x-www-form-urlencoded
this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}
- 發送JSONP請求獲取數據：
jsonpInfo() { // JSONP形式從服務器獲取數據
var url = 'http://127.0.0.1:8899/api/jsonp';
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
}
/*解決跨域請求的問題*/
jsonpInfo() { // 發起JSONP 請求
this.$http.jsonp('https://api.douban.com//v2/movie/top250', {},
{headers: {}, emulateJSON: true}
).then((response) => {
this.movie = response.data;
console.log(this.movie);
});
}
配置本地數據庫和數據接口API
- 先解壓安裝
PHPStudy; - 解壓安裝
Navicat這個數據庫可視化工具，並激活； - 打開
Navicat工具，新建空白數據庫，名爲dtcmsdb4; - 雙擊新建的數據庫，連接上這個空白數據庫，在新建的數據庫上
右鍵->運行SQL文件，選擇並執行dtcmsdb4.sql這個數據庫腳本文件；如果執行不報錯，則數據庫導入完成； - 進入文件夾
vuecms3_nodejsapi內部，執行npm i安裝所有的依賴項； - 先確保本機安裝了
nodemon, 沒有安裝，則運行npm i nodemon -g進行全局安裝，安裝完畢後，進入到vuecms3_nodejsapi目錄 ->src目錄 -> 雙擊運行start.bat - 如果API啓動失敗，請檢查 PHPStudy 是否正常開啓，同時，檢查
app.js中第14行中數據庫連接配置字符串是否正確；PHPStudy 中默認的 用戶名是root，默認的密碼也是root
品牌管理改造
展示品牌列表
添加品牌數據
刪除品牌數據
Vue中的動畫
爲什麼要有動畫：動畫能夠提高用戶的體驗，幫助用戶更好的理解頁面中的功能；
Case1:使用過渡類名
- HTML結構：
<div id="app">
<input type="button" value="動起來" @click="myAnimate">
<!-- 使用 transition 將需要過渡的元素包裹起來
name:生成css過渡類名，默認爲'v'
-->
<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;
}
}
});
- 定義兩組類樣式：
/* 定義進入和離開時候的過渡狀態
-enter-active 【入場動畫的時間段】
-leave-active 【離場動畫的時間段】
*/
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease;
position: absolute;
}
/* 定義進入過渡的開始狀態 和 離開過渡的結束狀態
-enter 【這是一個時間點】 是進入之前，元素的起始狀態，此時還沒有開始進入
-leave-to 【這是一個時間點】 是動畫離開之後，離開的終止狀態，此時，元素 動畫已經結束了
*/
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
Case2:使用第三方 CSS 動畫庫
- 導入動畫類庫：
<link rel="stylesheet" type="text/css" href="./lib/animate.css">
- 定義 transition 及屬性：
<transition
enter-active-class="fadeInRight"
leave-active-class="fadeOutRight"
:duration="{ enter: 500, leave: 800 }">
<div class="animated" v-show="isshow">動畫哦</div>
</transition>
Case3:使用動畫鉤子函數
- 定義 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>
- 定義三個 methods 鉤子方法：
methods: {
// 注意： 動畫鉤子函數的第一個參數：el，表示 要執行動畫的那個DOM元素，是個原生的 JS DOM對象
// 大家可以認爲 ， el 是通過 document.getElementById('') 方式獲取到的原生JS DOM對象
beforeEnter(el) { // 動畫進入之前的回調
el.style.transform = 'translateX(500px)';
},
enter(el, done) { // 動畫進入完成時候的回調
// 這句話，沒有實際的作用，但是，如果不寫，出不來動畫效果；
// 可以認爲 el.offsetWidth 會強制動畫刷新
el.offsetWidth;
el.style.transform = 'translateX(0px)';
done();
// 這裏的 done， 起始就是 afterEnter 這個函數，也就是說：done 是 afterEnter 函數的引用
},
afterEnter(el) { // 動畫進入完成之後的回調
this.isshow = !this.isshow;
}
}
- 定義動畫過渡時長和樣式：
.show{
transition: all 0.4s ease;
}
Case4: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 = '';
}
}
});
Case5:列表的排序過渡
<transition-group> 組件還有一個特殊之處。不僅可以進入和離開動畫，還可以改變定位。要使用這個新功能只需瞭解新增的 v-move 特性，它會在元素的改變定位的過程中應用。
v-move和v-leave-active結合使用，能夠讓列表的過渡更加平緩柔和：
.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}