Vue.js
El enlace de datos

Texto

La forma más básica de enlace de datos es la interpolación de texto usando la sintaxis de "Bigote" (llaves dobles):

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

La etiqueta del bigote se reemplazará con el valor de la propiedad msg en el objeto de datos correspondiente. También se actualizará cada vez que cambie la propiedad msg del objeto de datos.

También puede realizar interpolaciones de una sola vez que no se actualizan en el cambio de datos:

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

HTML sin procesar

Los bigotes dobles interpretan los datos como texto plano, no HTML. Para generar HTML real, deberá usar los bigotes triples:

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

Los contenidos se insertan como HTML simple: se ignoran los enlaces de datos. Si necesita reutilizar piezas de plantilla, debe usar parciales.

Atributos

Los bigotes también se pueden usar dentro de los atributos HTML:

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

Tenga en cuenta que las interpolaciones de atributos no están permitidas en las directivas Vue.js y los atributos especiales. No te preocupes, Vue.js generará advertencias cuando los bigotes se usen en lugares equivocados.

Filtros

Vue.js le permite agregar "filtros" opcionales al final de una expresión, denotados por el símbolo "pipe":

{{ message | capitalize }}

Aquí estamos "canalizando" el valor de la expresión del message través del filtro de capitalize incorporado, que de hecho es solo una función de JavaScript que devuelve el valor capitalizado. Vue.js proporciona una serie de filtros integrados, y hablaremos sobre cómo escribir sus propios filtros más adelante.

Tenga en cuenta que la sintaxis de canalización no forma parte de la sintaxis de JavaScript, por lo tanto, no puede mezclar filtros dentro de las expresiones; solo puedes añadirlos al final de una expresión.

Los filtros pueden ser encadenados:

{{ message | filterA | filterB }}

Los filtros también pueden tomar argumentos:

{{ message | filterA 'arg1' arg2 }}

La función de filtro siempre recibe el valor de la expresión como primer argumento. Los argumentos entre comillas se interpretan como una cadena simple, mientras que los que no están entre comillas se evaluarán como expresiones. Aquí, la cadena simple 'arg1' pasará al filtro como segundo argumento, y el valor de la expresión arg2 se evaluará y pasará como el tercer argumento.