Vue.js
Dataverbinding

Tekst

De meest basale vorm van gegevensbinding is tekstinterpolatie met de syntaxis "Moustache" (dubbele accolades):

<span>Message: {{ msg }}</span>

De snortag wordt vervangen door de waarde van de eigenschap msg op het bijbehorende gegevensobject. Het wordt ook bijgewerkt wanneer de msg eigenschap van het gegevensobject verandert.

U kunt ook eenmalige interpolaties uitvoeren die niet worden bijgewerkt bij gegevensverandering:

<span>This will never change: {{* msg }}</span>

Ruwe HTML

De dubbele snor interpreteert de gegevens als platte tekst, niet als HTML. Om echte HTML uit te voeren, moet je drievoudige snorren gebruiken:

<div>{{{ raw_html }}}</div>

De inhoud wordt ingevoegd als gewone HTML - gegevensbindingen worden genegeerd. Als u sjabloonstukken opnieuw wilt gebruiken, moet u gedeeltelijke gebruiken.

attributen

Snorren kunnen ook worden gebruikt in HTML-kenmerken:

<div id="item-{{ id }}"></div>

Merk op dat attribuutinterpolaties niet zijn toegestaan in Vue.js-richtlijnen en speciale attributen. Maak je geen zorgen, Vue.js waarschuwt je wanneer snorren op verkeerde plaatsen worden gebruikt.

filters

Met Vue.js kunt u optionele "filters" toevoegen aan het einde van een uitdrukking, aangeduid met het "pipe" -symbool:

{{ message | capitalize }}

Hier zijn we “piping” de waarde van de message expressie door middel van de ingebouwde capitalize filter, die in feite slechts een JavaScript-functie dat het rendement van de gekapitaliseerde waarde. Vue.js biedt een aantal ingebouwde filters en we zullen later bespreken hoe u uw eigen filters kunt schrijven.

Merk op dat de pijpsyntaxis geen onderdeel is van de JavaScript-syntaxis, daarom kunt u filters niet in uitdrukkingen mengen; u kunt ze alleen toevoegen aan het einde van een uitdrukking.

Filters kunnen worden gekoppeld:

{{ message | filterA | filterB }}

Filters kunnen ook argumenten aannemen:

{{ message | filterA 'arg1' arg2 }}

De filterfunctie ontvangt altijd de waarde van de uitdrukking als het eerste argument. Geciteerde argumenten worden geïnterpreteerd als gewone tekenreeks, terwijl niet-geciteerde argumenten als uitdrukkingen worden geëvalueerd. Hier wordt de gewone string 'arg1' als tweede argument in het filter doorgegeven en wordt de waarde van expressie arg2 geëvalueerd en doorgegeven als het derde argument.