Vue modifier

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

Vue provides some modifiers that are handy to use, such as preventing default events, bubbling, and so on.

1. Form modifiers

.lazy: v-modeil Needless to say, the data changes when the input box changes. Lazy updates the data until the cursor leaves the input box.

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

. Trim: Filter the first and last Spaces in the input box.

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

. Number: If you enter a number first, you can only enter a number. If you enter a string first, you do not add a number. ** Note: ** is not the input box cannot enter a string, is the data is a number;

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

2. Event modifiers

.stop: stops events from bubbling. stopPropagation();

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

.prevent: Prevent the default behavior; otherwise, the event.preventDefault() method is called. For example, form submission and a tag jump are default events.

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

.self: the method fires only when the element itself is fired, that is, when the element itself is clicked; For example, a div has a button inside it, and both div and button have events. If we click on the button, the div binding method will also fire. If we click on the div with self, it will fire only when we click on the div.

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

.once: can be used only once. No matter how many times you click it, it will not be executed again.

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

.capture: The complete event mechanism is: catch-target-bubble. By default, event triggers bubble up from the target. When we add.capture, it’s the other way around, and the event triggers start at the top level that contains the element and go down.

// 1 2 4 3 
<div @click.capture="shout(1)">
  obj1
  <div @click.capture="shout(2)">
    obj2
    <div @click="shout(3)">
      obj3
      <div @click="shout(4)">
        obj4
      </div>
    </div>
  </div>
</div>
Copy the code

Passive: When we listen to the element scroll event, the onScroll event will always be triggered. This is ok on the PC; On the mobile side, however, it will make our web page stall, so when we use this modifier, we are setting a.lazy modifier for the onScroll event

<! The default behavior of the scroll event (that is, the scroll behavior) will be triggered immediately --> <! - and not wait`onScroll`Complete - > <! -- this includes`event.preventDefault()`-- > the condition of the<div v-on:scroll.passive="onScroll">.</div>
Copy the code

. Native: Component binding events are not triggered. Native can only be triggered. The purpose of this modifier is to convert a VUE component into a normal HTML tag. Note: Using the. Native modifier to manipulate normal HTML tags invalidates events;

<My-component  @click="shout(3)"></My-component>
Copy the code

3. Mouse modifier

Left click. Right click. Middle Click

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

4. Keyboard modifiers

KeyCode: If we don’t use the keyCode modifier, we trigger shout every time we press the keyboard. This modifier is useful when we want to specify that a key is pressed to trigger the shout, check the key code table;

<input type="text" @keyup.keyCode="shout(4)">
Copy the code

Vue provides aliases for some commonly used keys:

/ / common key
.enter 
.tab
.delete  // (capture delete and backspace keys)
.space
.esc
.up
.down
.left
.right

// System modifier key
.ctrl
.alt
.meta
.shift
Copy the code

Customize key modifier aliases through the global config.keyCodes object:

// You can use 'V-on :keyup.f1'
Vue.config.keyCodes.f1 = 112
Copy the code

As we have seen above, keys are divided into common keys and system modifier keys. What is the difference? When we write the following code, we see that the keyUP event cannot be triggered by using only the system modifier key. We need to link system modifier keys with other keycodes;

<input type="text" @keyup.ctrl67.="shout(4)">
Copy the code

This will trigger the keyUp event when we simultaneously press CTRL + C. Alternatively, if it is a mouse event, you can use system modifiers alone.

<button @mouseover.ctrl="shout(1)">ok</button>
<button @mousedown.ctrl="shout(1)">ok</button>
<button @click.ctrl.67="shout(1)">ok</button>
Copy the code

The modifier for the system modifier key cannot be used with one finger (at least two fingers, but more). Keyboard events can be achieved by holding one finger down on the system modifier key and one finger down on another key. Mouse events can also be achieved by holding the system modifier key with one finger and the mouse with the other hand.

Shift/CTRL can also trigger. There may be scenarios where you only need to press one system modifier (like making some shortcuts), but not when you press CTRL and other keys. Note: This only limits the system modifier key. After writing like this you can still press CTRL + C, CTRL + V or CTRL + Normal, but you can’t press CTRL + Shift + Normal.

<button type="text" @click.ctrl.exact="shout(4)">ok</button>
Copy the code

You can press Enter + Normal to trigger this, but you can’t press System modifier + Enter to trigger this.

<input type="text" @keydown.enter.exact="Shout (' I'm triggered ')">
Copy the code

5. V-bind modifier

Sync In some cases, we may need to “bidirectional bind” a prop. Unfortunately, true bidirectional binding can cause maintenance problems. Because a child component can modify its parent, there is no obvious source of change in either parent or child. What we usually do is:

// Parent component
<comp :myMessage="bar" @update:myMessage="func"></comp>
//js
func(e){
 this.bar = e;
}

// Child component js
func2(){
  this.$emit('update:myMessage',params);
}
Copy the code

The.sync modifier simplifies this step

/ / the parent component
<comp :myMessage.sync="bar"></comp> 

/ / child component
this.$emit('update:myMessage' , params);
Copy the code

Note:

1. When using sync, the event name passed by the sub-component must be update:value, which must be identical to the name declared in the props (myMessage, not my-message).
2. V-bind with the.sync modifier cannot be used with expressions (e.g. V-bind :title.sync= “doc.title + ‘! ‘” is invalid). Instead, only provide the name of the property you want to bind to, like v-Model;
3. Using v-bind.sync on a literal object, such as v-bind.sync= “{title: doc.title}”, does not work because there are many edge cases to consider when parsing a complex expression like this;

.prop Distinguishes: Property: Properties of node objects stored in memory that can be accessed and set. Attribute: One of the properties of a node object. The value is an object. Attributes(‘xx’).getAttributes(‘xx’) by using the point-access method document.getelementById (‘xx’). Add and modify document.getelementById (‘xx’).setAttribute(‘xx’,value). All attributes defined in the tag, including HTML attributes and custom attributes, are stored as key-value pairs in the Attributes object. The words attribute and property are both translated as attributes, but javascript Advanced Programming translates them as properties and attributes to distinguish them

// Where id,value,style belong to property
// index belongs to an attribute
// Id, title, etc. are both attributes and features. If you modify an attribute, its corresponding feature will change. If you modify a property, the property changes
<input id="uid" title="title1" value="1" :index="index">
// input.index === undefined
// input.attributes.index === this.index
Copy the code

From the above we can see that if you use v-bind directly, the attribute is bound to the DOM node by default. To: 1. Store variables using custom attributes to avoid exposing data; 2. Prevent contamination of HTML structure; We can use this modifier as follows:

<input id="uid" title="title1" value="1" :index.prop="index">
//input.index === this.index
//input.attributes.index === undefined
Copy the code

.camel is case insensitive due to HTML features.

<svg :viewBox="viewBox"></svg>
Copy the code

It actually renders to

<svg :viewbox="viewBox"></svg>
Copy the code

This will cause rendering to fail because the SVG tag only recognizes the viewBox, but does not know what a viewBox is. If we use the. Camel modifier, it will be rendered as the camel name. In addition, if you use the string template, there are no such restrictions.

new Vue({
  template: '<svg :viewBox="viewBox"></svg>'
})
Copy the code