Vue.js
Databindning

Text

Den mest grundläggande formen för databindning är textinterpolering med syntaxen "Mustasch" (dubbla lockiga hängslen):

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

Mustaschtaggen kommer att ersättas med värdet för msg egenskapen på motsvarande dataobjekt. Det kommer också att uppdateras när msg egenskap ändras.

Du kan också utföra engångsinterpolationer som inte uppdateras vid dataändring:

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

Rå HTML

De dubbla mustascherna tolkar data som vanlig text, inte HTML. För att mata ut verklig HTML måste du använda trippel mustascher:

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

Innehållet infogas som vanliga HTML - databindningar ignoreras. Om du behöver återanvända malldelar bör du använda partiklar.

attribut

Mustascher kan också användas i HTML-attribut:

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

Observera att attributinterpolationer tillåts inte i Vue.js-direktiv och specialattribut. Oroa dig inte, Vue.js kommer att ge varningar för dig när mustascher används på fel platser.

filter

Med Vue.js kan du lägga till valfria "filter" i slutet av ett uttryck, betecknat med "pipe" -symbolen:

{{ message | capitalize }}

Här "piperar" vi värdet på message genom det inbyggda capitalize , som faktiskt bara är en JavaScript-funktion som returnerar det aktiverade värdet. Vue.js tillhandahåller ett antal inbyggda filter, och vi kommer att prata om hur du skriver dina egna filter senare.

Observera att rörsyntaxen inte är en del av JavaScript-syntax, därför kan du inte blanda filter inuti uttryck; du kan bara lägga till dem i slutet av ett uttryck.

Filter kan kedjas:

{{ message | filterA | filterB }}

Filter kan också ta argument:

{{ message | filterA 'arg1' arg2 }}

Filterfunktionen får alltid uttryckets värde som det första argumentet. Citerade argument tolkas som vanlig sträng, medan icke-citerade kommer att utvärderas som uttryck. Här kommer den vanliga strängen 'arg1' att överföras till filtret som det andra argumentet, och värdet på uttrycket arg2 kommer att utvärderas och skickas in som det tredje argumentet.