<commit_before>---
title: Data Binding Syntax
type: guide
order: 4
---

Vue.js uses a DOM-based templating implementation. This means that all Vue.js templates are essentially valid, parsable HTML enhanced with some special attributes. Keep that in mind, since this makes Vue templates fundamentally different from string-based templates.

## Interpolations

### Text

The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces):

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

The mustache tag will be replaced with the value of the `msg` property on the corresponding data object. It will also be updated whenever the data object's `msg` property changes.

You can also perform one-time interpolations that do not update on data change:

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

### Raw HTML

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use triple mustaches:

``` html
<div>{{{ raw_html }}}</div>
```

The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse template pieces, you should use [partials](/api/#partial).

<p class="tip">Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content.</p>

### Attributes

Mustaches can also be used inside HTML attributes:

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

Note that attribute interpolations are disallowed in Vue.js directives and special attributes. Don't worry, Vue.js will raise warnings for you when mustaches are used in wrong places.

## Binding Expressions

The text we put inside mustache tags are called **binding expressions**. In Vue.js, a binding expression consists of a single JavaScript expression optionally followed by one or more filters.

### JavaScript Expressions

So far we've only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside data bindings:

``` html
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}
```

These expressions will be evaluated in the data scope of the owner Vue instance. One restriction is that each binding can only contain **one single expression**, so the following will **NOT** work:

``` html
<!-- this is a statement, not an expression: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}
```

### Filters

Vue.js allows you to append optional "filters" to the end of an expression, denoted by the "pipe" symbol:

``` html
{{ message | capitalize }}
```

Here we are "piping" the value of the `message` expression through the built-in `capitalize` filter, which is in fact just a JavaScript function that returns the capitalized value. Vue.js provides a number of built-in filters, and we will talk about how to write your own filters later.

Note that the pipe syntax is not part of JavaScript syntax, therefore you cannot mix filters inside expressions; you can only append them at the end of an expression.

Filters can be chained:

``` html
{{ message | filterA | filterB }}
```

Filters can also take arguments:

``` html
{{ message | filterA 'arg1' arg2 }}
```

The filter function always receives the expression's value as the first argument. Quoted arguments are interpreted as plain string, while un-quoted ones will be evaluated as expressions. Here, the plain string `'arg1'` will be passed into the filter as the second argument, and the value of expression `arg2` will be evaluated and passed in as the third argument.

## Directives

Directives are special attributes with the `v-` prefix. Directive attribute values are expected to be **binding expressions**, so the rules about JavaScript expressions and filters mentioned above apply here as well. A directive's job is to reactively apply special behavior to the DOM when the value of its expression changes. Let's review the example we saw in the introduction:

``` html
<p v-if="greeting">Hello!</p>
```

Here, the `v-if` directive would remove/insert the `<p>` element based on the truthiness of the value of the expression `greeting`.

### Arguments

Some directives can take an "argument", denoted by a colon after the directive name. For example, the `v-bind` directive is used to reactively update an HTML attribute:

``` html
<a v-bind:href="url"></a>
```

Here `href` is the argument, which tells the `v-bind` directive to bind the element's `href` attribute to the value of the expression `url`. You may have noticed this achieves the same result as an attribute interpolation using `{% raw %}href="{{url}}"{% endraw %}`: that is correct, and in fact, attribute interpolations are translated into `v-bind` bindings internally.

Another example is the `v-on` directive, which listens to DOM events:

``` html
<a v-on:click="doSomething">
```

Here the argument is the event name to listen to. We will talk about event handling in more detail too.

### Modifiers

Modifiers are special postfixes denoted by a dot, which indicates that a directive should be bound in some special way. For example, the `.literal` modifier tells the directive to interpret its attribute value as a literal string rather than an expression:

``` html
<a v-bind:href.literal="/a/b/c"></a>
```

Of course, this seems pointless because we can just do `href="/a/b/c"` instead of using a directive. The example here is just for demonstrating the syntax. We will see more practical uses of modifiers later.

## Shorthands

The `v-` prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building an SPA where Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives, `v-bind` and `v-on`:

### `v-bind` Shorthand

``` html
<!-- full syntax -->
<a v-bind:href="url"></a>

<!-- shorthand -->
<a :href="url"></a>

or

<!-- full syntax -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- shorthand -->
<button :disabled="someDynamicCondition">Button</button>
```


### `v-on` Shorthand

``` html
<!-- full syntax -->
<a v-on:click="doSomething"></a>

<!-- shorthand -->
<a @click="doSomething"></a>
```

They may look a bit different from "valid" HTML, but all Vue.js supported browsers can parse it correctly, and they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.
<commit_msg>Translated 100% Syntax.md<commit_after>---
title: Sintassi del Vincolo dei Dati
type: guide
order: 4
---

Vue.js implementa un sistema di template basato sul DOM della pagina HTML. Questo significa chhe tutti i template Vue.js sono visti come delle porzioni di DOM con qualche funzionalità in più. Tenete a mente che questo rende i template di Vue.js molto differenti dai template su unica stringa.

## Interpolazioni

### Testo

La più base delle interpolazioni è quella che utilizza la sintassi "Mustache", o a Baffo, (le doppie parentesi graffe assomigliano a dei baffi):

``` html
<span>Messaggio: {{ msg }}</span>
```

Le parentesi graffe verranno rimpiazzate dal valore della variable `msg`, più propriamente andrà a sostituire la proprietà dell'oggetto `data` di Vue. Essendo reattiva ogni cambiamento a `msg` verrà riflettuto sulla vista

Puoi anche effettuare un interpolazione unica omettendo il sistema di sincronizzazione:

``` html
<span>Questo messaggio non cambierà più: {{* msg }}</span>
```

### HTML Puro

Le doppie parentesi graffe interpretano i dati come testo, non come HTML. Per ottenere un interpretazione HTML pura bisogna usare tre parentesi graffe:

``` html
<div>{{{ raw_html }}}</div>
```

Il contenuto verrà inserito come HTML, I vincoli con i dati verranno ignorati. Se questo sistema inizia a diventare ripetitivo puoi sempre fare uso dei [Parziali](/api/#partial).

<p class="tip">Attenzione, fare il rendering dinamico di HTML sulla tua applicazione può essere pericolo in quanto può scatenare [Attacchi XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Usate questa procedura se e soltanto se avete la certezza sicura di dove provenga l'HTML che volete interpretare e **mai** renderizzare HTML generato dagli utenti.</p>

### Attributi

Le parentesi graffe possono essere usate anche negli attributi dello specifico elemento HTML:

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

Da notare che l'interpolazione degli attributi è disabilitata neglle specifiche direttive oppure negli attributi personali di Vue.js. Non preoccupatevi perchè Vue.js vi allerterà qualora utilizziate male le parentesi graffe.

## Espressioni Vincolanti

Il testo all'interno delle doppie parentesi graffe viene chiamato **espressione vincolante**. In Vue.js, un espressione vincolante consiste in una singola espressione JavaScript seguita, molte volta, da uno o più filtri dedicati.

### Espressioni in JavaScript

Fin'ora abbiamo solo visto come vegono gestite le proprità dell'oggetto data nel nostro template HTML. Vue.js può anche interpretare complesse espressioni JavaScript all'interno delle parentesi graffe:

``` html
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}
```

Queste espressioni vengono valutate nell'ambito di chi, in quel momento, detiene l'istanza Vue utilizzata. Questo sistema ha una sola restrizione, ogni doppia graffa può contenere **una singola espressione** perciò i seguenti esempi **NON** funzioneranno:

``` html
<!-- Questa, in particolare, non è un espressione: -->
{{ var a = 1 }}

<!-- Costrutti di controllo non funzionano: -->
{{ if (ok) { return message } }}
```

### Filtri

Vue.js permette di inserire dei "filtri" opzionali alla fine di un espressione tra parentesi graffe, tutti i filtri sono suddivisi da una `pipe`:

``` html
{{ message | capitalize }}
```

In questo caso stiamo "accodando" (piping) il risultato della espressione di sinistra, ovvero il valore della proprietà `message`, alla parte di espressione dopo la `pipe` che, in questo caso, è il funzione interna `capitalize`. Vue.js fornisce una serie di filtri integrati già pronti all'utilizzo, successivamente vedremo come scrivere filtri personalizzati.

Da notare che la `pipe` non fa parte della sintassi generale di JavaScript, difatti non può essere mescolata con altre espressioni ma solo usata come conflusso di dati tra la parte sinistra della pipe e la parte destra dell'espressione.

I filtri possono essere concatenati:

``` html
{{ message | filterA | filterB }}
```

Inoltre possono ricevere parametri come argomenti

``` html
{{ message | filterA 'arg1' arg2 }}
```

La funzione del filtro in se riceverà sempre il risultato dell'espressione a sinistra della pipe come primo argomento. Il resto degli argomenti vengono presi come vendono scritti, i valori circondati da apici verranno interpretati come stringhe, gli altri sempre come espressioni. Nell'esempio sopra la stringa `'arg1'` verrà passata come secondo parametro della funzione del filtro, invece il secondo parametro `arg2` verra valutato come risultato di un espressione e poi passato alla funzione del filtro.

## Direttive

Le direttive sono attributi speciali che hanno `v-` come prefisso. Il contenuto delle direttive dev'essere sempre sottoforma di **espressione vincolante**, perciò si possono sfruttare tutte le regole dei filtri ed espressioni viste fin'ora. Il compito primario di una direttiva è quella di applicare, in modo reattivo, un comportamento speciale al DOM quando l'espressione della direttiva cambia.
Rivediamo l'esempio dell'introduzione:

``` html
<p v-if="greeting">Ciao!</p>
```

In questo caso, la direttiva `v-if` rimuoverà l'intero elemento del DOM `<p>` se l'espressione `greeting` risulta non veritiera.

### Argomenti

Alcune direttive possono ricevete degli "argomenti", separati da un `:` dopo il nome della direttiva stessa. Per esempio `v-bind` può essere utilizzato per aggiornare in modo reattivo un singolo attributo HTML:

``` html
<a v-bind:href="url"></a>
```

In questo caso `href` è l'argomento, che impone a `v-bind` di legare l'attributo concreto `href` dello specifico tag HTML al valore dell'espressione che ne risulta da `url`. Sicuramente avrete notato che la stesso identico risultato si può ottenre con l'intrepolazione degli attributi, nello specifico si poteva scrivere `{% raw %}href="{{url}}"{% endraw %}`: e avreste ottenuto lo stesso risultato, correttamente; difatti l'inrepolazione degli attributi viene "tradotta" in `v-bind` internamente da Vue.js.

Un altro esempio è la direttiva `v-on`, la quale ascolta per eventi legati al DOM:

``` html
<a v-on:click="doSomething">
```

In questo caso l'argomento principale è l'evento da ascoltare, il click, parleremo più in dettagli di come gestire gli eventi.

### Modificatori

I modificatori sono suffissi speciali, separati da un punto, che indica in che modo particolare la direttiva debba legarsi. Per esempio, il modificatore `.literal` impone alla direttiva di intrpretare il valore della suo attributo come una stringa piuttosto che come un espressione:

``` html
<a v-bind:href.literal="/a/b/c"></a>
```

Ovviamente questo esempio sembra fuorviante perchè potremmo fare benissimo `href="/a/b/c"` invece di usare una direttiva. Abbiamo usato questo esempio solo per farvi vedere la sintassi, successivamente vedremo degli usi più pratici.

## Scorciatoie

Il prefisso `v-` è prettamente utilizza per marcare tutti gli attributi specifici di Vue.js. E' molto utile quando Vue.js applica comportamenti dinamici a del markup giù esistente, ma può sembrare prolisso quando si inizia ad utilizzare molto spesso. Allo stesso tempo il prefisso `v-` diventa sempre meno importante quando si costruisco applicazioni quasi interamente con Vue.js. Ecco perchè Vue.js offre delle interessanti ed utili scorciatoie per due delle direttive più utilizzate `v-bind` e `v-on`:

### Scorciatoia per `v-bind`

``` html
<!-- Sintassi completa -->
<a v-bind:href="url"></a>

<!-- Scorciatoia -->
<a :href="url"></a>

or

<!-- Sintassi completa -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- Scorciatoia -->
<button :disabled="someDynamicCondition">Button</button>
```


### Scorciatoia per `v-on`

``` html
<!-- Sintassi completa -->
<a v-on:click="doSomething"></a>

<!-- Scorciatoia -->
<a @click="doSomething"></a>
```

Queste scorciatoie possono sembrare differenti, ed invalide, rispetto al markup HTML standard, ma tutti i browsers che supportano Vue.js possono intrpretarle senza problemi e soprattutto non appariranno nel markup renderizzato all'utente finale. Le scorciatoie sono facoltative, ma molto consigliate e imparerete ad apprezzarle più avanti durante questa guida.

{'fraction_non_alphanumeric': 0.09059806566221462, 'fraction_numerical': 0.0011184946378051187, 'mean_word_length': 4.714285714285714, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 79, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6772542', 'n_tokens_mistral': 4596, 'n_tokens_neox': 4479, 'n_words': 2049}