What exactly does the legendary syntax sugar of VUE do

1. What is syntactic sugar?

Syntax sugar is also translated as sugar-coated grammar, a term invented by British computer scientist Peter J. Landin. It refers to a syntax added in the computer language. If it does not affect the function, adding a simple syntax can also achieve the effect. This syntax has no effect on the computer, but is more convenient for programmers. The usually added syntax sugar can increase the readability of programmers and reduce the chance of errors.

Using syntax sugar can simplify code and make it easier for programmers to develop.

2. What are the syntactic sugars in VUE?

1. The most common syntactic sugar v-model

Use v-model to achieve two-way data binding, but how to achieve it?

After v-model binds data, it not only binds the data, but also adds event listening. This event is the input event.

Use cases:

//Grammar sugar writing<input type="text" v-model="name" >
  
  //Restore to the following example<input type="text" 
 v-bind:value="name" 
 v-on:input="name=$">

The input event will be triggered when inputting, and the input event will assign the current value to value. This is why v-model can achieve two-way binding.

2. Syntax sugar of v-bind

v-bind is used to add dynamic attributes. Common properties such as src, href, class, style, title, etc. can be added dynamic attribute values ​​through v-bind.

The syntax sugar of v-bind is to remove v-bind and replace it with a colon (:)

// Syntax sugar writing<div :title="title">
 <img :src="url" alt="">
 <a :href="link" rel="external nofollow"  rel="external nofollow" >No syntactic sugar</a>
</div>

// No syntactic sugar<div v-bind:title="title">
 <img v-bind:src="url" alt="">
 <a v-bind:href="link" rel="external nofollow"  rel="external nofollow" >No syntactic sugar</a>
</div>

3. The syntax sugar of v-on

v-on binds event listener, the syntax sugar of v-on is abbreviated as @.

Case 1: If the method does not pass parameters, you can do not add brackets.

<button @click="btn">Syntactic sugar</button>

<button v-on:click="btn">无Syntactic sugar</button>

//It should be noted that if the method itself has a parameter, the native event event parameter will be passed in by defaultmethods:{
 btn( event ){
  ( 'event' , event )
 }
}

Case 2: If you need to pass parameters, you also need the event parameter.

<button @click="btn( 'Click Event' , $event )">Syntactic sugar</button>

//It should be noted that the $event event gets the browser event objectmethods:{
 btn( type, event ){
  ( 'type' , type ) //Click event  ( 'event' , event )
 }
}

4. Modifier

The modifier is a special suffix specified with a half-width period. The modifier after v-on is also syntactic sugar.

Example: Add click event to the link, and you do not want to jump after clicking.

//Synonyms sugar<a href="" rel="external nofollow"  rel="external nofollow"  @="go">Baidu</a>

//Ordinary writing<a href="" rel="external nofollow"  rel="external nofollow"  v-on:click="go">Baidu</a>
methods:{
 go(e){
  ();
  ('Block link jump')
 }
}

The prevent modifier is to block the default event. Also submit applies.

<form @="onSubmit"></form>

The following are common modifiers, the same as those used in the above .prevent.

• .stop is used to prevent events from bubbled.
• The .once event is fired only once.
• The .self event is triggered only on itself and cannot be triggered from within.
• .enter | .tab | .delete | .esc ...... Keyboard modifier
• .ctrl | .alt | .shift | .meta system modifier

  5. Dynamic CSS

  Use v-bind to use style or class, and dynamic styles can be added.

  //Click Hello, realize the switching between red and black text<h1 @click=" changeColor = !changeColor " :style="{color:changeColor?'red':'black'}">
   Hello
  </h1>
  
  data:{
    changeColor:false
  }

  6. Register component syntax sugar

  The so-called registered component syntax sugar refers to eliminating the definition of the component constructor and directly passing the component constructor object into the registered component function, which will reduce CPU scheduling and memory allocation.

  Global components use:

  //Global component syntax sugar writing(
    'my-component' , 
    template:`
    	<div>Component content</div>
    `)
  
  /* Global component registration */
  //Component usage<my-component></my-component>
  //Register componentconst myComponent = ({
   template:`
    <div>
     <h2>VUkeh</h2>    
    </div>
    `
  })
  ('myComponent', myComponent)

  Local components use:

//Global component syntax sugar writingcomponents:{
  'my-component':{
  	template:`<div>Component content</div>`
  }
}

/* Local component registration */
//Register componentconst myComponent = ({
 template:`
  <div>
   <h2>VUkeh</h2>    
  </div>
  `,
  components:{
  	child:{
     template:`<div>子Component content</div>`
    }
  }
})
('myComponent', myComponent)

This is the end of this article about what the legendary "grammatical sugar" of VUE is. For more related content on vue syntax sugar, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!