What is grammar sugar?

Syntactic sugar, also known as sugar-coated grammar, is a term coined by British computer scientist Peter J. Landin. This syntax has no effect on the computer, but it is more convenient for the programmer. Usually, the added syntax sugar can increase the readability of the programmer and reduce the chance of errors.

Using syntactic sugar simplifies code and makes it easier for programmers to develop.

What are the grammatical sugars in VUE?

1. The most common syntax sugar v-model

Two-way data binding can be implemented using the V-Model, but how?

After the V-Model binds the data, it both binds the data and adds an event listener, called an input event.

Use cases:

<input type="text" v-model="name" > <input type="text" v-bind:value="name" v-on:input="name=$event.target.value">Copy the code

Input triggers an input event that assigns the current value to value, which is why v-Models can be bi-bound.

2, V-bind syntax sugar

V-bind can be used to add dynamic attributes, such as SRC, href, class, style, title, etc.

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

/ / syntactic sugar written < div: title = "title" > < img: SRC = "url" Alt = "" > < a: href =" link "> no syntactic sugar < / a > < / div > / / no syntactic sugar < div V - bind: title = "title" > < img v - bind: SRC = "url" Alt = "" > < a v - bind: href =" link "> no syntactic sugar < / a > < / div >Copy the code

V-on grammar candy

V-on binding event listener, v-on syntax sugar, is shorthand at sign.

Case 1: If the method does not take arguments, the parentheses can be omitted.

<button @click=" BTN "> </button> <button V-on :click=" BTN "> </button> {BTN (event){console.log('event', event)}}Copy the code

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

< button@click =" BTN (' click event ', $event)"> {BTN (type, event){console.log('type', type) // Click console.log('event', event)}}Copy the code

4. Modifiers

Modifiers are special suffixes specified by half – corner periods. Modifier after V-on, also syntactic sugar.

Example: link adds a click event and does not want to jump after the click.

/ / syntactic sugar < a href = "http://www.baidu.com" @ click. Prevent = "go" > baidu < / a > / / longhand < a href = "http://www.baidu.com" V - on: click = "go" > baidu < / a > the methods: {go (e) {e.p reventDefault (); Console. log(' prevent link jumping ')}}Copy the code

The Prevent modifier is the prevent default event. Submit also works.

<form @submit.prevent="onSubmit"></form>
Copy the code

The following are common modifiers, as used above with.prevent.

  • . Stop Prevents events from bubbling.
  • The. Once event is triggered only once.
  • The.self event is emitted only by itself, not from within.
  • .enter | .tab | .delete | .esc ….. Keyboard modifier
  • . CTR |. Alt |. Shift. | meta system modifier

5. Dynamic CSS

Using V-bind, either style or class, you can add dynamic styles.

<h1 @click=" changeColor =! changeColor " :style="{color:changeColor? </h1> data:{changeColor:false}Copy the code

Register component syntax sugar

Registering component syntax sugar means omitting the definition of the component constructor and passing the component constructor object directly into the registering component function, which reduces CPU scheduling and memory allocation.

Global components use:

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)Copy the code

Local components use:

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>' content </div> '}}}) Vue.component('myComponent', myComponent)Copy the code