Was macht der legendäre VUE-Syntax-Sugar?

1. Was ist syntaktischer Zucker?

Syntaktischer Zucker, auch übersetzt als gezuckerte Grammatik, ist ein Begriff, den der britische Informatiker Peter J. Landin geprägt hat. Es bezieht sich auf eine Art Syntax, die einer Computersprache hinzugefügt wird. Ohne die Funktion zu beeinträchtigen, kann auch das Hinzufügen einer einfachen Syntax den Effekt erzielen. Diese Syntax hat keine Auswirkungen auf den Computer, ist aber für Programmierer praktischer. Normalerweise kann der hinzugefügte Syntaxzucker die Lesbarkeit für Programmierer verbessern und die Wahrscheinlichkeit von Fehlern verringern.

Die Verwendung von syntaktischem Zucker kann den Code vereinfachen und Programmierern die Entwicklung erleichtern.

2. Was sind die Syntax-Sugars in VUE?

1. Das am häufigsten verwendete Syntax-Sugar-V-Modell

Mit dem V-Modell können Sie eine bidirektionale Datenbindung erreichen. Aber wie geht das?

Nachdem das V-Modell an Daten gebunden ist, bindet es nicht nur die Daten, sondern fügt auch einen Ereignislistener hinzu, der das Eingabeereignis ist.

Anwendungsfälle:

//Syntaxzucker <input type="text" v-model="name" >
  
  //Stellen Sie das folgende Beispiel wieder her <input type="text" 
 v-bind:Wert="Name" 
 v-on:input="name=$event.ziel.wert">

Wenn eine Eingabe erfolgt, wird das Eingabeereignis ausgelöst und das Eingabeereignis weist dem Wert den aktuellen Wert zu. Aus diesem Grund kann das v-Modell eine bidirektionale Bindung erreichen.

2. Syntaktischer Zucker von v-bind

v-bind wird zum Hinzufügen dynamischer Attribute verwendet. Allgemeine Attribute wie src, href, class, style, title usw. können alle über v-bind dynamische Attributwerte hinzufügen.

Die Syntaxvereinfachung für v-bind besteht darin, v-bind zu entfernen und durch einen Doppelpunkt (:) zu ersetzen.

// Syntax-Zucker <div :title="title">
 <img :src="url" alt="">
 <a :href="link" rel="external nofollow" rel="external nofollow" >Kein syntaktischer Zucker</a>
</div>

// Kein Syntaxzucker <div v-bind:title="title">
 <img v-bind:src="url" alt="">
 <a v-bind:href="link" rel="external nofollow" rel="external nofollow" >Kein Syntax-Zucker</a>
</div>

3. Syntaktischer Zucker für v-on

v-on bindet Ereignis-Listener. Die einfache Syntax von v-on wird mit @ abgekürzt.

Fall 1: Wenn die Methode keine Parameter übergibt, sind Klammern nicht erforderlich.

<button @click="btn">Syntaxzucker</button>

<button v-on:click="btn">Kein Syntax-Schnickschnack</button>

//Es ist zu beachten, dass, wenn die Methode selbst einen Parameter hat, der native Ereignisparameter von Standardmethoden übergeben wird:{
 btn(Ereignis){
  console.log( "Ereignis", Ereignis)
 }
}

Fall 2: Wenn Parameter übergeben werden müssen, sind auch Ereignisparameter erforderlich.

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

//Es ist zu beachten, dass das Ereignis $event die Methoden des Browser-Ereignisobjekts erhält: {
 btn(Typ, Ereignis){
  console.log('Typ', Typ) //Klicken Sie auf Ereignisconsole.log('Ereignis', Ereignis)
 }
}

4. Modifikatoren

Modifikatoren sind spezielle Suffixe, die durch einen Punkt gekennzeichnet sind. Der Modifikator nach v-on ist ebenfalls syntaktischer Zucker.

Beispiel: Fügen Sie einem Link ein Klickereignis hinzu, möchten Sie aber nach dem Klicken nicht weiterleiten.

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

//Gewöhnliche Schreibweise <a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" v-on:click="go">Baidu</a>
Methoden:{
 gehen(e){
  e.preventDefault();
  console.log('Linksprung verhindern')
 }
}

Der Prevent-Modifikator verhindert das Standardereignis. Gleiches gilt für das Einreichen.

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

Im Folgenden finden Sie allgemeine Modifikatoren, die auf die gleiche Weise wie .prevent oben verwendet werden.

• .stop wird verwendet, um das Aufsteigen von Ereignissen zu stoppen.
• Das .once-Ereignis wird nur einmal ausgelöst.
• .self-Ereignisse werden nur durch das Ereignis selbst ausgelöst und können nicht von innen heraus ausgelöst werden.
• .enter | .tab | .delete | .esc ..... Tastaturmodifizierer
• .ctr | .alt | .shift | .meta Systemmodifikatoren

  5. Dynamisches CSS

  Mit v-bind können Sie dynamische Stile über Stil oder Klasse hinzufügen.

  //Klicken Sie auf „Hallo“, um den Text zwischen Rot und Schwarz umzuschalten<h1 @click=" changeColor = !changeColor " :style="{color:changeColor?'red':'black'}">
   Hallo</h1>
  
  Daten:{
    Farbe ändern:false
  }

  6. Syntax-Zucker der Registerkomponente

  Die sogenannte Syntaxvereinfachung für Registrierungskomponenten bedeutet, dass die Definition des Komponentenkonstruktors weggelassen und das Komponentenkonstruktorobjekt direkt an die Registrierungskomponentenfunktion übergeben wird, wodurch die CPU-Planung und die Speicherzuweisung reduziert werden.

  Globale Komponentenverwendung:

  //Globale Komponentensyntax vereinfache Vue.component(
    'meine-Komponente', 
    Vorlage:`
    	<div>Komponenteninhalt</div>
    `)
  
  /* Globale Komponentenregistrierung */
  //Komponente verwendet <my-component></my-component>
  //Komponente registrieren const myComponent = Vue.extend({
   Vorlage:`
    <div>
     <h2>VUkeh</h2>    
    </div>
    `
  })
  Vue.component('meineKomponente', meineKomponente)

  Lokale Komponentenverwendung:

//Globale Komponentensyntax für Sugar-Komponenten:{
  'meine-Komponente':{
  	Vorlage:`<div>Komponenteninhalt</div>`
  }
}

/* Lokale Komponentenregistrierung*/
//Komponente registrieren const myComponent = Vue.extend({
 Vorlage:`
  <div>
   <h2>VUkeh</h2>    
  </div>
  `,
  Komponenten: {
  	Kind:{
     Vorlage:`<div>Inhalt der Unterkomponente</div>`
    }
  }
})
Vue.component('meineKomponente', meineKomponente)

Dies ist das Ende dieses Artikels über den legendären VUE-Syntaxzucker. Weitere relevante Inhalte zum VUE-Syntaxzucker finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!