1. V-Bind-Abkürzung
<!-Komplette Syntax-> <a v-Bind: href = "url"> </a> <!-Abkürzung-> <a: href = "url"> </a> <!-komplette Syntax-> <button v-bind: deaktiviert = "SOMEYMICONDITION"> Button </button <! : Disabled = "SOMEDYNAMICCONDITION"> Button </button>
2. V-on-Abkürzung
<!-Vollständige Syntax-> <a v-on: click = "dosomething"> </a> <!-Abkürzung-> <a @click = "dosomething"> </a>
3. Filter
{{message | Kapitalisieren}}4. Bedingte Rendering
v-if<h1 v-if="ok">Yes</h1><h1 v-else>No</h1><div v-if="Math.random() > 0.5"> Sorry</div><div v-else> Not sorry</div>template-v-if<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2 </p> </template> v-show <h1 v-show = "OK"> Hallo! </H1>
5. LISTE RETRENDERUNG FÜR
v-für <ul id = "example-1"> <li v-für = "item in items"> {{item.message}} </li> </ul> var example1 = new VUE ({el: '#example-1', data: {items: [{message: 'foo'}, {message: 'bar'}]}}}}); <ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li></ul>var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' }]}});Erkennung von Arrayänderungen
Vue.js wickelt die mutierten Methoden der beobachteten Arrays ein, damit sie Ansichtsaktualisierungen auslösen können. Die verpackten Methoden sind: push (), pop (), reverse (), unshift (), splice (), sort (), reverse ()
Beispiel1.Items.push ({message: 'baz'}); Template-V-für <ul> <Vorlage v-für = "Element in Elementen"> <li> {{item.msg}} </li> <li> </li> </template> </ul>Objekt V-für
<ul id = "repep-Object"> <li v-für = "value in Object"> {{$ key}}: {{value}} </li> </ul> neuer VUE ({El: '#repep-Object', Data: {Objekt: {erstername: 'John', lastname: doe ', aggressiv: 30}}});Wertebereich V-für
<div> <span v-for = "n in 10"> {{n}} </span> </div>6. Methoden und Ereignishandler
Methodenprozessor
<div id = "Beispiel"> <button v-on: click = "greet"> greet </button> </div> var vm = new vue ({el: '#example', data: {name: 'vue.js'}, // methodien in der `methods 'objection: {greet: function (Ereignis) {//). `event` ist eine native DOM -Ereignis -Warnung (event.target.tagname)}}}) // Sie können auch die Methode vm.greet () im JavaScript -Code aufrufen. // -> 'Hallo Vue.js!'Inline -Anweisungsprozessor
<div id = "example-2"> <button v-on: klick = "say ('hi')"> say hi </button> <button v-on: klick = "say ('was')"> Sag was </button> </div> neuer vue ({{el: '#Beispiel-2', Methoden: {say: function (msg) {alert (msg)}}});Manchmal ist es auch notwendig, auf native DOM -Ereignisse im Inline -Anweisung -Prozessor zuzugreifen. Sie können das spezielle Variable $ -Event verwenden, um es in die Methode zu übergeben
<Button V-On: Click = "Say ('Hallo!', $ event)"> Senden </button> Methoden: {Say: Funktion (MSG, Ereignis) {// Jetzt können wir auf das native Ereignisobjekteereignis zugreifen. PreventDefault ()}};## Ereignismodifikator
<!-verhindern, dass das klickereignis von sprudel klicke-> <a v-on: click.stop = "dothis"> </a> <!-Sendenereignis überlädt die Seite nicht mehr-> <Formular v-on: submit.prevent = "Onsubmit"> </form> <!-Modifikatoren können überkatener-> <a v-on: klick.stop: v-on: subine.prevent> </form>
## Schlüsselmodifikator
<!-vm.submit () wird nur aufgerufen, wenn KeyCode 13-> <Eingabe v-on: keyUp.13 = "subieren"> <!
Alle wichtigen Alias: Geben Sie, Registerkarte ein, löschen, ESC, Platz, oben, unten, links, rechts
## Andere Beispiele
New Vue ({el: '#demo', Daten: {newLabel: '', Statistiken: Statistiken}, Methoden: {add: function (e) {e.PreventDefault () if (! this.newLabel) {return;} this.stats.push ({{Label: this.newlabel: value: 100}); (stat) {if (this.stats.length> 3) {this.stats. $ REMET (STAT);7. Übergang
CSS -Übergang
<div v-if = "show" transition = "expand"> Hallo </div> Dann fügen Sie CSS-Regeln für .expand-transition, .expand-Enter und .expand-Leave:/* Erforderlich*/. Expand-Transition {Übergang: Alle .3s Leichtigkeit hinzu; Höhe: 30px; Polsterung: 10px; Hintergrundfarbe: #eee; Überlauf: Hidden;}/* .expand-Inner Definieren Sie den Startzustand* //* .expand-Leave Definieren Sie den Endzustand der Abreise*/. Expand-Enter, .expand-Leave {Höhe: 0; Polsterung: 0 10px; Opazität: 0;}Sie können durch dynamische Bindung unterschiedliche Übergänge zum gleichen Element erreichen:
<div v-if = "show": transition = "transitionName"> Hallo </div> neuer Vue ({el: '...', Daten: {Show: False, TransitionName: 'Fade'}}Zusätzlich können JavaScript -Hooks bereitgestellt werden:
Vue.transition('expand', { beforeEnter: function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // handle cancellation }, beforeLeave: function (el) {El.TextContent = 'BeforeLeave'}, Leave: Funktion (el) {el.textContent = 'Leave'}, Afterleave: Funktion (el) {el.textContent = 'Afterleave'}, LeaveCancelled: Funktion (el) {// Cancellation}}});8. Komponenten
1. Register
// Definieren Sie var mycomponent = vue.extend ({template: '<div> Eine benutzerdefinierte Komponente! </Div>'}); // Register Vue.comPonent ('My-component', myComponent); // Rootinstance New Vue erstellen ({El: '#--2-2-divent> oder write "/id =" id = "id =" id = "id =" AS: vue.comPonent ('my-component', {Vorlage: '<Div> Eine benutzerdefinierte Komponente! </div>'}); // Root-Instanz neu erstellen neuer VUE ({el: '#example'}); <div id = "Beispiel"> <my-component> </my-component> </div>2. Verwenden Sie Prop, um Daten zu übergeben
Beispiel 1:
Vue.comPonent ('child', {// Requisiten -Requisiten deklarieren: ['msg'], // Prop kann in Vorlagen verwendet werden // Sie können `this.msg` verwenden, um Vorlage zu setzen: '<span> {{{msg}} </span>'}); <child msg =" Hallo!Beispiel 2:
Vue.comPonent ('child', {// camelcase in JavaScript -Requisiten: ['myMessage'], Vorlage: '<span> {{myMessage}} </span>'}); <!-Kebab-Case in HTML-> <Child my-message = "Hallo!"> </Child>3.. Dynamische Requisiten
<Div> <Eingabe v-model = "parentmsg"> <br> <untergeordnetes V-Bind: my-message = "parentmsg"> </child> </div>
Die Verwendung der Abkürzungssyntax von V-Bind ist normalerweise einfacher:
<Child: my-message = "parentmsg"> </child>
4.Prop -Bindungstyp
Prop ist standardmäßig Einwegbindung: Wenn sich die Eigenschaften der übergeordneten Komponenten ändern, wird sie an die untergeordnete Komponente übergeben, aber nicht umgekehrt. Dies soll verhindern, dass die untergeordnete Komponente versehentlich den Status der übergeordneten Komponente ändert. Dies erschwert den Datenfluss der Anwendung. Es ist jedoch auch möglich, die bidirektionale oder alltägliche Bindung mit dem .SYNC- oder .once-Bindungsmodifikator explizit zu erzwingen:
Vergleichende Syntax:
<!-Standard ist Einwegbindung-> <child: msg = "priventsg"> </child> <!-bidirektionale Bindung-> <child: msg.sync = "parentmsg"> </child> <!-Single Bindung-> <child: msg.once = "parentMSG"> </childes teures Beispiel: <modal: <modal: show: show. Slot = "Header"> Benutzerdefinierte Header </H3> </modal> </div>
5. Überprüfung der Prop
Komponenten können Überprüfungsanforderungen für Requisiten angeben. Dies ist nützlich, wenn Komponenten anderen gegeben werden, da diese Überprüfungsanforderungen die API der Komponente bilden, um sicherzustellen, dass andere die Komponente korrekt verwenden. Zu diesem Zeitpunkt ist der Wert von Requisiten ein Objekt, das Überprüfungsanforderungen enthält:
VUE.COMPONENT ('Beispiel', {Props: {// Basisart Erkennung (`null` bedeutet, dass ein Typ OK ist) Propa: Nummer, // Erforderlich und String Propb: {Typ: String, erforderlich: true}, // Nummer mit Standardwert -Propc: {Typ: Default: 100}, // Default -Wert. . propg: {coerce: function (val) {return val + '' // den Wert in einen String}}, Proph: {coerce: function (val) {return json.parse (val) // den JSON -String in ein Objekt}}}});Andere Beispiele:
Vue.comPonent ('modal', {Vorlage: '#modal-template', Requisiten: {show: {type: boolean, forder: true, toway: true}}});6. Register
// Define var mycomponent = vue.extend ({template: '<div> Eine benutzerdefinierte Komponente! </Div>'}); // Register Vue.comPonent ('my-component', myComponent); // Rootinstance New Vue erstellen ({El: '#-2-2-divent>;Oder schreiben Sie es direkt:
Vue.comPonent ('my-component', {Vorlage: '<Div> Eine benutzerdefinierte Komponente! </Div>'}); // Root-Instanz neu erstellen neuer VUE ({el: '#example'}); <div id = "Beispiel"> <my-component> </my-component> </div>7. Verwenden Sie Prop, um Daten zu übergeben
Beispiel 1:
Vue.comPonent ('child', {// Requisiten -Requisiten deklarieren: ['msg'], // Prop kann in Vorlagen verwendet werden // Sie können `this.msg` verwenden, um Vorlage zu setzen: '<span> {{{msg}} </span>'}); <child msg =" Hallo!Beispiel 2:
Vue.comPonent ('child', {// camelcase in JavaScript -Requisiten: ['myMessage'], Vorlage: '<span> {{myMessage}} </span>'}); <!-Kebab-Case in HTML-> <Child my-message = "Hallo!"> </Child>8. Dynamische Requisiten
<Div> <Eingabe v-model = "parentmsg"> <br> <untergeordnetes V-Bind: my-message = "parentmsg"> </child> </div>
Die Verwendung der Abkürzungssyntax von V-Bind ist normalerweise einfacher:
<Child: my-message = "parentmsg"> </child>
9.Prop -Bindungstyp
Prop ist standardmäßig Einwegbindung: Wenn sich die Eigenschaften der übergeordneten Komponenten ändern, wird sie an die untergeordnete Komponente übergeben, aber nicht umgekehrt. Dies soll verhindern, dass die untergeordnete Komponente versehentlich den Status der übergeordneten Komponente ändert. Dies erschwert den Datenfluss der Anwendung. Es ist jedoch auch möglich, die bidirektionale oder alltägliche Bindung mit dem .SYNC- oder .once-Bindungsmodifikator explizit zu erzwingen:
Vergleichende Syntax:
<!-Standard ist Einwegbindung-> <child: msg = "parentmsg"> </child> <!-bidirektionale Bindung-> <Child: msg.ync = "parentmsg"> </child> <!-Single Bindung-> <child: msg.once = "parentsg"> </child>
Andere Beispiele:
<modal: show.sync = "showModal"> <h3 Slot = "Header"> Benutzerdefinierte Header </H3> </modal> </div>
10.PROP -Überprüfung
Komponenten können Überprüfungsanforderungen für Requisiten angeben. Dies ist nützlich, wenn Komponenten anderen gegeben werden, da diese Überprüfungsanforderungen die API der Komponente bilden, um sicherzustellen, dass andere die Komponente korrekt verwenden. Zu diesem Zeitpunkt ist der Wert von Requisiten ein Objekt, das Überprüfungsanforderungen enthält:
VUE.COMPONENT ('Beispiel', {Props: {// Basisart Erkennung (`null` bedeutet, dass ein Typ OK ist) Propa: Nummer, // Erforderlich und String Propb: {Typ: String, erforderlich: true}, // Nummer mit Standardwert -Propc: {Typ: Default: 100}, // Default -Wert. . propg: {coerce: function (val) {return val + '' // den Wert in einen String}}, Proph: {coerce: function (val) {return json.parse (val) // den JSON -String in ein Objekt}}}});Andere Beispiele:
Vue.comPonent ('modal', {Vorlage: '#modal-template', Requisiten: {show: {type: boolean, forder: true, toway: true}}});11. Slot verwenden, um Inhalte zu verteilen
Das Element <Slot> wird als Inhaltsverteilungssteckplatz in der Komponentenvorlage verwendet. Dieses Element selbst wird ersetzt.
Ein Steckplatz mit dem Namensattribut wird als benannter Slot bezeichnet. Der Inhalt mit Slot -Attribut wird mit passenden Namen an benannte Slots verteilt.
Nehmen wir beispielsweise an, wir haben eine Multi-Insertion-Komponente mit einer Vorlage wie:
<div> <slot name = "eins"> </slot> <Slot> </slot> <slot name = "two"> </slot> </div>
Übergeordnete Komponentenvorlage:
<Multi-Insertion> <P Slot = "eins"> ein </p> <p Slot = "zwei"> zwei </p> <p> Standard A </p> </multi-INSEERTION>
Das Rendering -Ergebnis ist:
<div> <p Slot = "eins"> ein </p> <p> Standard A </p> <p Slot = "zwei"> zwei </p> </div>