前端與移動開發之vue-day1(4)
阿新 • • 發佈:2018-11-20
Vue除錯工具vue-devtools的安裝步驟和使用
Vue.js 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}-${d}`; } 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}-${d} ${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}-${d}`; } 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}-${d} ${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">