- 1.x 版本中的filterBy指令，在2.x中已經被廢除：
<tr v-for="item in list | filterBy searchName in 'name'">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">刪除</a>
</td>
</tr>
- 在2.x版本中手動實現篩選的方式：
- 篩選框綁定到 VM 實例中的
searchName屬性：
<hr> 輸入篩選名稱：
<input type="text" v-model="searchName">
- 在使用
v-for指令循環每一行數據的時候，不再直接item in list，而是in一個 過濾的methods 方法，同時，把過濾條件searchName傳遞進去：
<tbody>
<tr v-for="item in search(searchName)">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">刪除</a>
</td>
</tr>
</tbody>
-
search過濾方法中，使用 數組的filter方法進行過濾：
search(name) {
return this.list.filter(x => {
return x.name.indexOf(name) != -1;
});
}
Vue調試工具vue-devtools的安裝步驟和使用
過濾器
概念：Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符指示；
私有過濾器
- HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
- 私有
filters定義方式：
filters: { // 私有局部過濾器，只能在 當前 VM 對象所控制的 View 區域進行使用
dataFormat(input, pattern = "") { // 在參數列表中 通過 pattern="" 來指定形參默認值，防止報錯
var dt = new Date(input);
// 獲取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 傳遞進來的字符串類型，轉為小寫之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否則，就返回 年-月-日 時：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-$zcxuz1b`;
} else {
// 獲取時分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-$2sbpnk0 ${hh}:${mm}:${ss}`;
}
}
}
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')來填充字符串；
全局過濾器
// 定義一個全局過濾器
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
// 獲取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 傳遞進來的字符串類型，轉為小寫之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否則，就返回 年-月-日 時：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-$uefz0fn`;
} else {
// 獲取時分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-$gipxxc1 ${hh}:${mm}:${ss}`;
}
});
注意：當有局部和全局兩個名稱相同的過濾器時候，會以就近原則進行調用，即：局部過濾器優先于全局過濾器被調用！
鍵盤修飾符以及自定義鍵盤修飾符
1.x中自定義鍵盤修飾符【了解即可】
Vue.directive('on').keyCodes.f2 = 113;
2.x中自定義鍵盤修飾符
- 通過
Vue.config.keyCodes.名稱 = 按鍵值來自定義案件修飾符的別名：
Vue.config.keyCodes.f2 = 113;
- 使用自定義的按鍵修飾符：
<input type="text" v-model="name" @keyup.f2="add">
自定義指令
- 自定義全局和局部的 自定義指令：
// 自定義全局指令 v-focus，為綁定的元素自動獲取焦點：
Vue.directive('focus', {
inserted: function (el) { // inserted 表示被綁定元素插入父節點時調用
el.focus();
}
});
// 自定義局部指令 v-color 和 v-font-weight，為綁定的元素設置指定的字體顏色 和 字體粗細：
directives: {
color: { // 為元素設置指定的字體顏色
bind(el, binding) {
el.style.color = binding.value;
}
},
'font-weight': function (el, binding2) { // 自定義指令的簡寫形式，等同于定義了 bind 和 update 兩個鉤子函數
el.style.fontWeight = binding2.value;
}
}
- 自定義指令的使用方式：
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
Vue 1.x 中 自定義元素指令【已廢棄,了解即可】
Vue.elementDirective('red-color', {
bind: function () {
this.el.style.color = 'red';
}
});
使用方式：
<red-color>1232</red-color>
vue實例的生命周期
- 什么是生命周期：從Vue實例創建、運行、到銷毀期間，總是伴隨著各種各樣的事件，這些事件，統稱為生命周期！
- 生命周期鉤子：就是生命周期事件的別名而已；
- 生命周期鉤子 = 生命周期函數 = 生命周期事件
- 主要的生命周期函數分類：
- 創建期間的生命周期函數：
- beforeCreate：實例剛在內存中被創建出來，此時，還沒有初始化好 data 和 methods 屬性
- created：實例已經在內存中創建OK，此時 data 和 methods 已經創建OK，此時還沒有開始 編譯模板
- beforeMount：此時已經完成了模板的編譯，但是還沒有掛載到頁面中
- mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示
- 運行期間的生命周期函數：
- beforeUpdate：狀態更新之前執行此函數， 此時 data 中的狀態值是最新的，但是界面上顯示的 數據還是舊的，因為此時還沒有開始重新渲染DOM節點
- updated：實例更新完畢之后調用此函數，此時 data 中的狀態值 和 界面上顯示的數據，都已經完成了更新，界面已經被重新渲染好了！
- 銷毀期間的生命周期函數：
- beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。
- destroyed：Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
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);
});
}
配置本地數據庫和數據接口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中的動畫
為什么要有動畫：動畫能夠提高用戶的體驗，幫助用戶更好的理解頁面中的功能；
使用過渡類名
- HTML結構：
<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);
}
使用第三方 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>
使用動畫鉤子函數
- 定義 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: {
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;
}
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 = '';
}
}
});
列表的排序過渡
<transition-group> 組件還有一個特殊之處。不僅可以進入和離開動畫，還可以改變定位。要使用這個新功能只需了解新增的 v-move 特性，它會在元素的改變定位的過程中應用。
-
v-move和v-leave-active結合使用，能夠讓列表的過渡更加平緩柔和：
.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}
