This is the 7th day of my participation in Gwen Challenge

$nextTick: Delays the execution of a piece of code. When you need to manipulate the DOM, put the DOM manipulation js in the this.nexttick () callback.

// $refs

 this.$nextTick(() = > {
     this.$refs['form'].resetFields()
})
Copy the code

2

watch: {
    currentCode(val, oldVal){// Normal watch listener - generally used for strings, values, booleans
       console.log("currentCode: "+val, oldVal);
    },  
    // Deep listen, can listen to the object, array changes
    formData: {
        // The function that should be executed when changes are heard.
      handler(val, oldVal) {
        console.log("formData: "+val.c, oldVal.c);
      },
      immediate: true.// Verify that the handler function is executed with the current initial value
      deep: true // Confirm whether to listen deeply}}Copy the code

I have the following understanding of immediate and deep:

  • If the immediate value is true, the object will be output immediately as soon as the page is refreshed. If the immediate value is true, the object will be output in the console as soon as the page is refreshed. OldValue is undefined.
  • If you do not set immediate or set immediate to false, the console does not listen to the object immediately after the page is refreshed. In other words, the console does not output output until the value of the monitored object changes.
  • Set the deep property when you need to listen for changes in properties within complex data (objects). Vue will recursively listen for changes in data and properties (high performance cost). That is, add handler functions to all data and attributes.

Conclusion:

The Watch listener executes only when the data changes. When the parent component dynamically transfers values to its child components and the child component obtains the default values from the parent component for the first time, the watch listener function also needs to be executed. Set immediate: true.

For deep listening, set deep:true

3. Common modifiers

V – model modifier

If the input box loses focus, the change event will be triggered.

<input type="text" v-model:lazy="value"/>
Copy the code

Input box filter final Spaces:

<input type="text" v-model:trim="value">
Copy the code

Cast to Number (return the original value if the result of the original value is NaN)

<input type="text" v-model:number="value">
Copy the code

The input value is converted to string on output

<input type="number" v-model='order'> 
Copy the code

Event.stoppropagation () = event.stopPropagation()

<button @click.stop="test"></button>
Copy the code

PreventDefault () = event.preventDefault() = event.preventDefault()

<button @click.prevent="test"></button>
Copy the code

Only clicking on the element itself will trigger:

<button @click.self="test"></button>
Copy the code

The event can only be used once, no matter how many times it is clicked, and never executed again:

<button @click.once="test"></button>
Copy the code

Bidirectional binding of prop:.sync