1. 程式人生 > >Vue過濾器,自定義指令,ES6字串操作

Vue過濾器,自定義指令,ES6字串操作

陣列的方法
以下方法都會對陣列中的每一項進行遍歷, 並執行相關的操作;

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, '填充內容');