instruction

Something like

that starts with a V – is an instruction. Common instructions are as follows:

v-bind

Function: Can be used to bind properties, including external properties.

<img v-bind:src='x'/>
// Can be shortened to
<img :src='x'/>
Copy the code

v-on

Function: Used for event binding

// Write 1, click to execute the add function
<button v-on:click='add'> </button>
// Test (1)
<button v-on:click='test(1)'> </button>
// Write the following code directly
<button v-on:click='n*=2'> </button>

// All of the above can be abbreviated, using @ instead of V-on
<button @click='add' ></button>
Copy the code

v-if

Function: Judge the conditions by V-if, V-else -if, V-else. The elements that meet the corresponding conditions will be added to the DOM tree

<div v-if='name==="bob"'>
    Bob
</div>
<div v-else-if='name==="Alice"'>
    Alice
</div>
<div v-else>No such person</div>
Copy the code

v-show

Function: Controls the display and hiding of elements

// Again, div is displayed only when the v-show condition is true
<div v-show='x>2'</div>Copy the code

As an aside, since v-if and V-show both control display, what’s the difference between them? The main differences between the two are:

v-ifV-show determines whether to display the corresponding label in the DOM tree according to whether the condition is true or not. V-show is similar to CSS to control the display of styles. Such as the display: none; display:blockCopy the code

v-for

Function: This loop is similar to a normal for loop, which iterates through elements and does the corresponding operation each time. Note: v-for must set the key, and the value passed to the key should not be repeated

Example 1: traversal the array,arr: each element of the array, index: the index of the corresponding element
<ul> 
    <li v-for="(arr,index) in Array " :key='index'> </li>
</ul>

// Example 2: object traversal. Value: each value in the object. Key: the corresponding Key.
<ul> 
    <li v-for="(value,Key) in obj " :key='Key'> </li>
</ul>

Copy the code

Look at the actual code:

The modifier

stop

Function: Used to prevent event propagation/bubbling

<button @click.stop='add'> click < / button >Copy the code

Normally, when a child element is clicked, the click event bubbles to the parent element, so you see something like this:And when you add the click event to the child elementstopAfter that, it means that the click event stops here and does not spread out any more. As shown in the figure:

prevent

Function: Used to block default events

////@click.prevent='x' to prevent default events from going to baidu interface and then executing x function code in methods.
new Vue({
    template:` 
      
 
        baidu  
      
 `.methods: {x(){
            console.log('xx')}}})Copy the code

{keycode||keyAlias}

Function: Can be used to monitor keyboard events

// Listen for the keycode that was pressed by the enter key, because the keycode of the enter key is 13,
new Vue({  
  template:` 
      
 
        
      
 `}})// The second way to write keyAlias, Alias is the Alias, replace 13 with the corresponding keyname
new Vue({  
  template:` 
      
 
        
      
 `
})
Copy the code

The rest of the key modifiers can be found in the official website link;

.sync

In Vue, if parent and child components want to complete data transfer, they can do this by v-ON and external properties. For example, the common value transfer step between components is as follows:

There is nothing to be said for the child to pass to the parent, but there is room for optimizing the parent’s pass and the code that listens for the event to fetch the value.

//Vue specifies the following code
:money='total' @update:money="total=$event" 
// Can be directly simplified into the following form
:money.sync='total' 
Copy the code

The.sync code must comply with the following characteristics: 1. The name followed by the colon must be the same as the name of the props passed to the subcomponent. 2.

---