Vue notes: instructions (2)

v-bind

Syntactic sugar

Dynamically change the attribute value of the label

The two classes will not be repeated, and the
v-bind binding style style will be merged internally

50px(value) needs to be quoted, otherwise vue will think it is a variable and will report an error

Advanced version

v-on

You can write operations directly, and you can also call the method syntax in methods when it is complicated

Parameter problem

• If the method does not require additional parameters, then the () after the method can not be added
• @Event=function name. Whether to add parentheses mainly depends on whether you need to pass parameters
• If the method itself has a parameter, the native event event parameter will be passed in by default
• If you need to pass a parameter at the same time, when you need event at the same time, you can pass in the event through $event

Modifier
modifier.top prevents the triggering of event bubbling

Modifier.prevent prevents default events

Modifier.{keyCode|keyAlas} Monitor the click of the key code pressed by the keyboard

Modifier.once only triggers the callback function once

v-if

• Render when the value of v-if is true, not render when it is false

  

  

v-else

When isShow is false, display

When the judgment is more complicated, it is not recommended to use tags, but use calculated attributes

v-show

Show when v-show is true

• When isShow is false, both h2 disappear, but the way of disappearing is different, v-if is h2 and the dom is gone, v-show is to change the diplay of style attribute to none
• When it is necessary to switch between display and hide frequently: v-show has only one switch: v-if

v-for

In the traversal process, the subscript value is not used

During the traversal process, get the subscript value

In the process of traversing the object, if only a value is obtained, then the value is obtained

Traverse an element in the object

Get key and value format: (value,key)

• for process to add new elements

1. There are 5 (1,2,3,4,5) elements in this array. If you want to insert an element at the second position (A),
   vue does this: create li0(1) in the virtual dom in turn, li1(2), create
   li2(A) in the second position of the array , and then li3(3), li4(4), li5(5) in sequence again. Many things need to be changed, which will affect efficiency
2. When binding: key='item' (key is the same as the thing to be displayed, corresponding), he will
   reuse this dom in the virtual dom, directly create a new element (A), and put it in the corresponding The position of the
   diff algorithm is efficient , and the function of the key is mainly to update the virtual dom more efficiently