Vue study notes (3) - Brand Management System

Technical points

Hook function
Custom command
Custom filter
Computed Property
Listener Properties

Custom command

Why do I need a custom command?

In order to code reuse and flexibility.

Instruction category:

Global directive:

In the example instruction vm created outside;
Created by Vue.directive;

Local instruction: After the supplement

How to define custom instructions? (Not assigned)

Vue.directive (command name, {inserted (el, binding) {}})

How to use a custom instruction? (Not assigned)

v- command name

With instructions on how to define value?

Vue.directive(名称, {inserted(el,binding){binding.value}})

How to use the instruction requires assignment?

v- instruction name = 'value'

Have a hook function in the full life cycle of vue

mounted hook function, it is an independent structure, do not write methods properties
Hook function: function will automatically trigger a scene

Dom does not recommend using the native way to get the elements, since vue is to be able to liberate us from the tedious operation dom

vue element marked by ref (reference)

ref = 'label value'
id function is similar to the previous settings
Gets the value by this. $ Refs

Although the above implementation, but there is one major drawback: If you need to get the focus of the elements of change, and to imply that the template code and mounted hook function code need to be modified - is inconvenient and unreasonable. I hope to achieve this effect: I made one that allows element gain focus function (function), if the elements need to get the focus on the call, otherwise when it does not exist - this thing is the instruction;

Instructions: can achieve a certain function, the user can choose to use

What is a global custom instruction: Instruction created outside vue examples

How to Create a global custom command

Vue.directive (name, {inserted hook function})

inserted hook function: triggering inserts to the parent node in addition instruction elements - that the white tree generation dom

Vue.directive ( 'Focus' , {
     // EL: adding elements of this is the current instruction, el may be used to direct operation DOM     
    inserted The (EL, Binding, vnode) {
         // We need to get and set the focus element 
        console.log (EL) 
        el.focus () 
    } 
})

New demand: we need to modify the text color according to user preferences

Implemented by Directive

By Vue.directive (name, {inserted (el, binding) {}})

When using the instruction: v- name = 'value'

// set the color of a custom command 
Vue.directive ( 'setColor' , {
     // EL: this instruction currently used element 
    // Binding: It is an object, which has a property value, the current value of the instruction is bound 
    inserted The (EL, Binding) { 
        the console.log (Binding) 
        el.style.color = binding.value 
    } 
})

detail:

Named details: It is recommended when naming specific command is lowercase

update hook function when processing data or templates when content changes automatically trigger

// add update, monitor changes in the value of the command to refresh the page 
Update (EL, Binding) { 
    the console.log (EL) 
    the console.log (Binding) 
    el.style.color = binding.value 
}

filter

Role: incoming data processing, return a reasonable result

kind:

Global Filters: vm example filter before (outside) created
Local filter: the filter assembly created in the interior

How to define

Vue.filter (name, function)

detail

Filters will default data object receives a parameter, this parameter is the current call filter
If you pass the parameters manually, it will not affect the default parameters passed, meaning the filter to add a new parameter directly after receiving the default parameters on it
Function filter "must" write return, because the filter must be returned Results

How to call?

Through a pipe symbol |
Format: need to call the filter data | filter name

// 添加全局的自定义过滤器
Vue.filter('timeForamt', (date,seperator1) => {
    // var date = new Date();
    // var seperator1 = "/";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    return currentdate;
})

Computed Property

What is calculated properties: it is a property of the object, which can encapsulate complex business logic - Method

Your function is defined in the calculation of property, but can be used like ordinary property, like to use to calculate property
Inside the function is a property, it can not be called by way of function, otherwise an error

What a scene using the calculated property: When your template business more complicated when you can use to calculate property encapsulates

When the computed attribute dependent data changes, the calculated attribute will be triggered
The so-called dependent data refers to the members of which depend on this

It differs from conventional methods of

There is no common method of caching mechanism, as long as you use the method, it must call the execute method will be
The basic calculation is dependent attribute caching, as long as the dependency means that the value does not change, then re-calculate property does not call, but once the results of the calculation - to improve efficiency

Use the search function to calculate property implementation

computed: { 
    Search () { 
        // monitor changes in user keyword, but the user input is changed, it is necessary to re-search 
        // calculated attribute function generally returns a calculation result 
        // var = Result [] 
        // for (var I = 0; I <this.brandList.length; I ++) { 
        //      // Description name the value of this object contains a keyword, which is looking for one of the recording I 
        //      // If you do not enter any of the keywords, this.userKey default is "" 
        //      IF (this.brandList [I] .name.indexOf (this.userKey)! = -1) { 
        //          result.push (this.brandList [I]) 
        / /      } 
        // } 
        // return Result 
        // every time a value is removed from the array, the parameters passed to the callback function value 
        // of value in the callback determines if the condition is detected, then the value will be the value of stored in the temporary array arr created internally filter method, the end will return this array arr 
        // forEach  map  filter
        return this.brandList.filter((value) => {
            return value.name.indexOf(this.userKey) != -1
        })
    }
}

Listener Properties - Listener

There is a lack of computing attributes: does not respond result of the asynchronous operation. If you need to listen for asynchronous operations when data changes, you need to use to watch

How to watch the listener to add

It is a listener property
Inside the method name can not be free, and you need to be listening exactly the same attribute name

Watch: {
     // method name must be a member and you want to listen for the name data in a consistent 
    First (newValue, oldValue) { 
        the setTimeout (() => { 
            console.log (newValue, oldValue) 
            the this .fullname = newValue. TRIM () the toUpperCase () + ":." + the this .second 
        }, 100 ); 
    }, 
        SECOND (newValue, oldValue) { 
            the console.log (newValue, oldValue) 
        } 
}

How to watch the listener to realize the depth of listening

What is the depth of monitoring: no longer is a direct member of this, the surface is a member of a member of this

Two implementations

handler +deep
'Object attribute' () {}

obj: {
     // listening function through a handler 
    handler (NV, OV) { 
        the console.log (nv.name, nv.age) 
    }, 
    // set depth listener 
    Deep: to true 
} 
// listen to the specified member variation value 
'obj.name' (NV) { 
    the console.log (NV) 
}

When to use a listener?

When the data related to the asynchronous operation mode, it is necessary to use a listener

Brand Management System Effects

Code Address: https://github.com/C4az6/Vue_study