Vue filter, custom key modifier, custom instruction, life cycle knowledge point

1. Filter

1. Define syntax

The first parameter in function is fixed. It is always the parameter passed in front of the filter pipeline symbol

//The first parameter in function is fixed. It is always the parameter passed in front of the filter pipeline symbol
 Vue.filter("msgmat", function(msg) {
            return msg.replace("beauty", "Fairy");
        })

2. Calling format

 <p>{{msg|Filter name}}  </p>

3. Global filter

All Vm instances are shared

4. Private filter

Note: when there are two filters with the same local and global names, they will be called according to the proximity principle, that is, the local filter will be called prior to the global filter!

2. Custom key modifier

2.1 global key alias

.enter
.teb
. delete snap delete and backspace keys
.esc
.space
.up
.down
.left
.right

//Just press the enter key and the add () method will be executed
   <input type="text" class="form-control" v-model="name" @keyup.enter="add">

2.2 customize global key modifiers

Via Vue config. keyCodes. Name = key value to customize the alias of case modifier:

Vue.config.keyCodes.f2 = 113;

2.3 custom key modifiers

<input type="text" v-model="name" @keyup.f2="add">

3. User defined instructions

3.1 user defined instructions

Customize the global instruction v-focus to automatically obtain the focus for the bound elements:
Parameter 1: the name of the instruction without v-prefix
Parameter 2: object. There are some related functions on this object to perform related operations at a specific stage
Global customized instructions should be written in front of the Vm instance, otherwise an error will be reported

    // Customize the global instruction v-focus to automatically obtain the focus for the bound elements:
//Parameter 1: the name of the instruction without v-prefix
//Parameter 2: object. There are some related functions on this object to perform related operations at a specific stage
    Vue.directive('focus', {
    //Every time you specify to bind to an element, the bind function will be executed only once
    bind:function(el){
     el.focus();
    }
      inserted: function (el) { // Inserted means called when the bound element is inserted into the parent node
        el.focus();
      },
      updated:function(){
      //When VNode is updated, the updated function will be executed (triggered multiple times)
              el.focus();
      }

    });

3.2 custom local instructions

Write in vm instance

<body>
    <div id="app">
        <input type="text" v-focus v-color="'red'" v-font-weight="900">
    </div>
    <script>
        // Customize the global instruction v-focus to automatically obtain the focus for the bound elements:
        Vue.directive('focus', {
           inserted: function(el) { // Inserted means called when the bound element is inserted into the parent node
                el.focus();
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            //Custom private directive
            directives: {
                color: { // Sets the specified font color for the element
                    bind(el, binding) {
                       el.style.color = binding.value;
                    }
                },
                'font-weight': function(el, binding2) { // The short form of user-defined instruction is equivalent to defining two hook functions: bind and update
                    el.style.fontWeight = binding2.value;
                }
            }
        });
    </script>
</body>

4.vue life cycle

What is the life cycle: from the creation, operation and destruction of Vue instances, there are always various events. These events are collectively referred to as the life cycle!
Life cycle hook : it's just another name for life cycle events;
Lifecycle hook = lifecycle function = lifecycle event
Main life cycle function categories:

1. Life cycle function during creation:
- Before create: the instance has just been created in memory. At this time, the data and methods attributes have not been initialized
- Created: the instance has been created OK in memory. At this time, the data and methods have been created OK. At this time, the template has not been compiled
- Before mount: at this time, the template has been compiled, but it has not been mounted on the page
- Mounted: at this time, the compiled template has been mounted in the container specified on the page for display
2. Life cycle function during operation:
- beforeUpdate: execute this function before status update. At this time, the status value in the data is the latest, but the data displayed on the interface is still old, because the DOM node has not been re rendered at this time
- Updated: call this function after the instance is updated. At this time, the status values in data and the data displayed on the interface have been updated, and the interface has been re rendered!
3. Life cycle function during destruction:
- beforeDestroy: called before the instance is destroyed. At this step, the instance is still fully available.
- Destroyed: called after the Vue instance is destroyed. After calling, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all sub instances will be destroyed.

Tags: Vue Vue.js

Posted by beanman1 on Thu, 19 May 2022 18:26:14 +0300

Algorithm Zone