What does the legendary VUE syntax sugar do?

1. What is syntactic sugar?

Syntactic sugar, also translated as sugar-coated grammar, is a term invented by British computer scientist Peter J. Landin. It refers to a kind of syntax added to a computer language. Without affecting the function, adding some simple syntax can also achieve the effect. This syntax has no effect on the computer, but it is more convenient for programmers. Usually the added syntax sugar can increase the readability of programmers and reduce the chance of errors.

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

2. What are the syntax sugars in VUE?

1. The most common syntax sugar v-model

Using v-model, you can achieve two-way data binding, but how to achieve it?

After v-model is bound to data, it not only binds the data but also adds an event listener, which is the input event.

Use Cases:

//Syntax sugar <input type="text" v-model="name" >
  
  //Restore to the following example <input type="text" 
 v-bind:value="name" 
 v-on:input="name=$event.target.value">

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

2. Syntactic sugar of v-bind

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

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

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

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

3. Syntactic sugar for v-on

v-on binds event listeners. The syntax sugar of v-on is abbreviated as @.

Case 1: If the method does not pass parameters, parentheses are not required.

<button @click="btn">Syntax Sugar</button>

<button v-on:click="btn">No syntax sugar</button>

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

Case 2: When parameters need to be passed, event parameters are also required.

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

//It should be noted that the $event event gets the browser event object methods: {
 btn( type, event ){
  console.log('type', type) //Click eventconsole.log('event', event)
 }
}

4. Modifiers

Modifiers are special suffixes indicated by a period. The modifier after v-on is also syntactic sugar.

Example: Add a click event to a link, but do not want to redirect after clicking.

//Syntax sugar <a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" @click.prevent="go">Baidu</a>

//Ordinary writing <a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" v-on:click="go">Baidu</a>
methods:{
 go(e){
  e.preventDefault();
  console.log('Prevent link jump')
 }
}

The prevent modifier prevents the default event. The same applies to submit.

<form @submit.prevent="onSubmit"></form>

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

• .stop is used to stop event bubbling.
• The .once event is fired only once.
• .self events are only triggered on the event itself and cannot be triggered from within.
• .enter | .tab | .delete | .esc ..... Keyboard modifiers
• .ctr | .alt | .shift | .meta system modifiers

  5. Dynamic CSS

  Using v-bind, you can add dynamic styles through style or class.

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

  6. Register component syntax sugar

  The so-called registration component syntax sugar means omitting the definition of the component constructor and directly passing the component constructor object into the registration component function, which will reduce CPU scheduling and memory allocation.

  Global component usage:

  //Global component syntax sugar Vue.component(
    'my-component' , 
    template:`
    	<div>Component content</div>
    `)
  
  /* Global component registration */
  //Component uses <my-component></my-component>
  //Register component const myComponent = Vue.extend({
   template:`
    <div>
     <h2>VUkeh</h2>    
    </div>
    `
  })
  Vue.component('myComponent', myComponent)

  Local component usage:

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

/* Local component registration*/
//Register component const myComponent = Vue.extend({
 template:`
  <div>
   <h2>VUkeh</h2>    
  </div>
  `,
  components:{
  	child:{
     template:`<div>Subcomponent content</div>`
    }
  }
})
Vue.component('myComponent', myComponent)

This is the end of this article about what the legendary VUE "syntax sugar" is. For more relevant VUE syntax sugar content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!