1, Instruction

1.1 what are instructions?

The essence of an instruction is a custom attribute

1.2 instructions

1. v-cloak instruction usage:

Solve the problem of interpolation expression: "flashing"

1. Data binding instruction

⚫ v-text fill in plain text

⚫ v-html fill HTML fragment

⚫ v-pre fills in the original information

1.3 event binding

v-on: click can be abbreviated as @ click

1.4 event modifiers

. stop stop bubbling

. prevent block default behavior

1.5 key modifier

. enter

<input v-on:keyup.enter='submit'>

. esc exit key

<input v-on:keyup.delete='handle'>

1.6 custom key modifiers

Global config Keycodes object

Vue.config.keyCodes.f1 = 112

1.7 attribute binding

1.7.1 how does Vue dynamically process attributes?

v-bind instruction usage

<a v-bind:href='url'>Jump</a>
​
//abbreviation
<a :href='url'>Jump</a>

1.8 style binding

1.8.1 class style processing

Object syntax

<div v-bind:class="{ active: isActive }"></div>

Array syntax

<div v-bind:class="[activeClass, errorClass]"></div>

1.8.2 style processing

Object syntax

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

Array syntax

<div v-bind:style="[baseStyles, overridingStyles]"></div>

1.9 branch loop structure

1. Branching structure ⚫ v-if ⚫ v-else ⚫ v-else-if ⚫ v-show

2. The difference between v-if and v-show ⚫ v-if controls whether elements are rendered to the page ⚫ Show - V controls whether the element has been rendered to the page

3. Cyclic structure

v-for traversal array

<li v-for='item in list'>{{item}}</li>
​
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>

Role of key: help Vue distinguish different elements, so as to improve performance

<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>

v-for traversal object

<div v-for='(value, key, index) in object'></div>

v-if and v-for are used together

<div v-if='value==12' v-for='(value, key, index) in object'></div>

2. Vue common features

2.1 form operation

2.1.1 Vue based form operation

⚫ Input single line text ⚫ textarea multiline text ⚫ select drop-down multiple selection ⚫ Radio radio box ⚫ checkbox multiple selection box

2.1.2 form field modifier:

number: convert to numeric

<input v-model.number="age" type="number">

trim: remove the spaces at the beginning and end. lazy: switch the input event to the change event

2.2 custom instructions

2.2.1 why do I need custom instructions? Built in instructions do not meet requirements

Syntax rules for custom instructions (get element focus)

Vue.directive('focus'{
    inserted:function(el){
    //Get element focus
    el.focus
    }
})

​
//Custom instruction usage

<input type="text" v-focus>

2.2.2 user defined instructions

Custom instruction with parameters (change element background color)

Vue.directive('color', {
   inserted : function(el,binding){
     el.style.backgroundColor = binding.value.color;
    }
})

​
//Instruction usage

<input type="text" v-color='{color:"orange"}'>

Local instructions:

//Use in Vue instances
​

directives : {
    focus :{
        //The definition of an instruction can also use bind
        inserted: function(el) {
            el.focus()
        }
    }
}

2.3 calculation attributes

2.3.1 why should attributes be calculated? The calculation logic of the expression may be complex, and the use of calculation attributes can make the template content more concise

2.3.2 usage of calculated attributes

conputed: {
    reversedMessage: function() {
        return this.msg.split('').reverse.join('')
    }
}

2.3.3 differences between calculation attributes and methods

Calculated properties are cached based on their dependencies. There is no cache

2.4 listener

2.4.1 the listener performs asynchronous or expensive operations when the application scenario data changes

2.4.2 listener usage

watch: {
    firstName: function(val) {
        //val represents the value after change
        this.fullname = val + this.lastName;
    },
        lastName: function(val) {
            this.fullName = this.firstName + val;
        }
}

2.5 filter

2.5.1 what is the function of the filter?

Format the data, such as formatting the string to uppercase the first letter, formatting the date to the specified format, etc

2.5.2 custom filter

/Vue.filter('Filter minister'，function(value){
    //Filter business logic
}
​
//Use of filters
<div>{{msg | upper}}</div>
<div>{{msg | upper |lower}}</div>
<div v-bind:id="id | formatId"></div>
​
​
//Local filter
filters: {
    capitalize : function() {}
}

2.5.3 filter with parameters

Vue.fileter('format', function(value,arg) {
    //value is the parameter passed by the filter
})
​
//Use of filters
<div>{{data | format('yyyy-MM-dd')}}</div>

2.6 life cycle

Mount (initialize related properties):

① beforeCreate is called after instance initialization and before data observation and event configuration. ② Created is called immediately after the instance is created. ③ beforeMount is called before the mount starts. ④ = = mounted el = = newly created VM$ El is replaced and mounted to an instance to invoke the hook.

Update (change operation of element or component)

⑤ Called when beforeUpdate data is updated, which occurs before the virtual DOM is patched. ⑥ Updated the virtual DOM is re rendered and patched due to data changes, after which the hook will be called.

Destroy (destroy related attributes)

Before the beforeDestroy instance is destroyed, it is called. Call destroyed instance after destruction