Vue filter, custom instruction, ES6 string operation

Keywords: Vue

Array method
The following methods will traverse each item in the array and perform related operations;

forEach: cannot be terminated
 some: can be terminated by return true
 Filter: can filter
 findIndex: the index of the corresponding object can be found

Delete / add array elements after index:

Splice (index, howmany, item1...) --- number of index, number of homony, elements added by item1

Filter filter
//Filter syntax definition: Vue.filter('filter name ', function() {})
//The first parameter of the function in the filter has been specified to be dead. It is always the data passed in front of the filter pipe character
Global filter:

Vue.filter('Name of filter', function(data) {
    return data + '123';
})

Private filter

var vm = new Vue({
    filters:{
        filtersName: function(data) {}
    }
})

VUE keyboard modifier:

.enter  .tab  .delete//Capture delete and backspace.esc.space.up.down.left.right
//You can also query the value of the keyboard code, such as F2:. 113
//You can also customize the global key modifier
Vue Code:
    Vue.config.keyCodes.f2 = 113
Html Code:
    <input type="text" v-model="name" @keyup.f2="add"> // add() is the method to add an array

VUE custom instruction

    // Use Vue.directive() to define global directives
    // Where: parameter 1: instruction name. Note that when defining, the instruction name does not need to be prefixed with v-prefix, 
    // However, when calling, you must prefix the instruction name with a v-prefix
    // Parameter 2: This is an object. In this object, there are some instruction related functions. These functions can perform related operations at a specific stage
    Vue.directive('focus', {
        bind: function(el) { // Whenever an instruction is bound to an element, the bind function is executed immediately, only once
            // Note: in each function, the first parameter is always el, which represents the element of the bound instruction. This El parameter is a native Js object
            // When an element is just bound to an instruction, it has not been inserted into Dom yet. At this time, the call to focus has no effect, because an element only needs to be inserted
            // el.focus();
        }, 
        inserted: function(el) { // Inserted means that when an element is inserted into the DOM, the inserted function will execute [trigger once]
            el.focus();
        }, 
        updated: function() {} // When VNode is updated, update will be executed, which can trigger multiple times
    })

String operation:
String substitution

str.replace(str1,str2);

String fill

str.padStrat(size, 'Fill content'); //Size: the size of the fill
str.padEnd(size, 'Fill content');

Posted by bpat1434 on Mon, 27 Jan 2020 07:35:14 -0800