Vue過濾器,自定義指令,ES6字串操作
阿新 • • 發佈:2019-01-04
陣列的方法
以下方法都會對陣列中的每一項進行遍歷, 並執行相關的操作;
forEach: 無法被終止
some: 可以通過return true終止
filter: 可以過濾
findIndex: 可以找到相應物件的索引
刪除/增加index個後的陣列元素:
splice(index, howmany, item1...) ---index個數, homany幾個, item1增加的元素
filter過濾器
// 過濾器語法定義: Vue.filter(‘過濾器名稱’, function(){})
// 過濾器中的function, 第一個引數已經被規定死了, 永遠都是過濾器管道符前面傳過來的資料
全域性過濾器:
Vue.filter('過濾器的名稱', function(data) {
return data + '123';
})
私有過濾器
var vm = new Vue({
filters:{
filtersName: function(data) {}
}
})
VUE鍵盤修飾符:
.enter .tab .delete//捕獲刪除及退格 .esc .space .up .down .left .right //也可以通過查詢鍵盤碼的值如f2: .113 //還可以自定義全域性按鍵修飾符 Vue程式碼: Vue.config.keyCodes.f2 = 113 Html程式碼: <input type="text" v-model="name" @keyup.f2="add"> // add()是陣列新增的方法
VUE自定義指令
// 使用 Vue.directive() 定義全域性的指令 // 其中: 引數1 : 指令名稱, 注意, 在定義的時候, 指令的名稱前面, 不需要加 v- 字首, // 但是, 在呼叫的時候, 必須 在指令的名稱前面新增v-字首 // 引數2 : 是個物件, 這個物件身上, 有一些指令相關的函式, 這些函式, 可以在特定的階段, 執行相關的操作 Vue.directive('focus', { bind: function(el) { // 每當指令繫結到元素上的時候, 會立即執行這個 bind 函式, 只執行一次 // 注意: 在每個函式中, 第一個引數永遠都是 el , 表示 被繫結指令的那個元素 , 這個 el引數是一個原生的Js物件 // 在元素 剛綁定了指令的時候, 還沒有插入到Dom中去, 這時候, 呼叫focus沒有作用, 因為一個元素只有插入 // el.focus(); }, inserted: function(el) { // inserted 表示元素插入到DOM中的時候, 會執行 inserted 函式[觸發一次] el.focus(); }, updated: function() {} // 當VNode更新的 時候, 會執行 update , 可以能會觸發多次 })
字串操作:
字串替換
str.replace(str1,str2);
字串填充
str.padStrat(size, '填充內容'); //size:填充的大小
str.padEnd(size, '填充內容');