Vue.js Sintaxis de plantillas

Vue.js utiliza una sintaxis de plantillas basada en HTML, que permite a los desarrolladores vincular declarativamente el DOM con los datos de la instancia de Vue subyacente.

El núcleo de Vue.js es un sistema que te permite renderizar datos en el DOM de forma declarativa utilizando una sintaxis de plantillas concisa.

Combinado con el sistema reactivo, cuando el estado de la aplicación cambia, Vue puede calcular inteligentemente el costo mínimo de volver a renderizar los componentes y aplicarlo a las operaciones del DOM.

Interpolación

Texto

La forma más común de enlace de datos es la interpolación de texto utilizando {{...}} (llaves dobles):

Interpolación de texto

<div id="app"> <p>{{ message }}</p> </div>

Pruébalo »

Html

Usa la directiva v-html para generar código HTML:

Directiva v-html

<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>Tutorial para novatos</h1>' } }) </script>

Pruébalo »

Atributos

Los valores en los atributos HTML deben usar la directiva v-bind.

El siguiente ejemplo evalúa el valor de use; si es true, usa el estilo de la clase class1; de lo contrario, no usa esa clase:

Directiva v-bind

<div id="app"> <label for="r1">Cambiar color</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}">Directiva v-bind:class</div> </div> <script> new Vue({ el: '#app', data:{ use: false } }); </script>

Pruébalo »

Expresiones

Vue.js proporciona soporte completo para expresiones de JavaScript.

Expresiones de JavaScript

<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">Tutorial para novatos</div> </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'EJEMPLO', id : 1 } }) </script>

Pruébalo »

Directivas

Las directivas son atributos especiales con el prefijo v-.

Las directivas se utilizan para aplicar ciertos comportamientos al DOM cuando cambia el valor de una expresión. Como en el siguiente ejemplo:

Ejemplo

<div id="app"> <p v-if="seen">Ahora me ves</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>

Pruébalo »

Aquí, la directiva v-if determinará si insertar el elemento p según el valor de la expresión seen (true o false).

Parámetros

Los parámetros se indican después de la directiva con dos puntos. Por ejemplo, la directiva v-bind se usa para actualizar reactivamente los atributos HTML:

Ejemplo

<div id="app"> <pre><a v-bind:href="url">Tutorial para novatos</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.example.com' } }) </script>

Pruébalo »

Aquí href es el parámetro; le dice a la directiva v-bind que vincule el atributo href del elemento con el valor de la expresión url.

Otro ejemplo es la directiva v-on, que se usa para escuchar eventos del DOM:

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

Aquí el parámetro es el nombre del evento que se está escuchando.

Modificadores

Los modificadores se indican con un punto de ancho medio.como sufijo especial, para señalar que una directiva debe vincularse de manera especial. Por ejemplo,.preventel modificador le dice a lav-ondirectiva que invoque el evento desencadenado.event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

Entrada del usuario

En el campo de entrada input podemos usar la directiva v-model para lograr un enlace de datos bidireccional:

Enlace de datos bidireccional

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'Ejemplo!' } }) </script>

Pruébalo »

v-modelLa directiva se usa para crear un enlace de datos bidireccional en elementos de control de formulario como input, select, textarea, checkbox, radio, etc. Según el valor del formulario, actualiza automáticamente el valor del elemento vinculado.

Para los eventos de los botones podemos usar v-on para escuchar los eventos y responder a la entrada del usuario.

El siguiente ejemplo invierte la cadena después de que el usuario hace clic en el botón:

Inversión de cadenas

<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Invertir cadena</button> </div> <script> new Vue({ el: '#app', data: { message: 'Ejemplo!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script>

Pruébalo »

Filtros

Vue.js te permite definir filtros personalizados, que se utilizan para algún formato de texto común. Se indican con el "símbolo de tubería" (pipe), con el siguiente formato:

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

La función de filtro recibe el valor de la expresión como primer argumento.

El siguiente ejemplo convierte la primera letra de la cadena de entrada a mayúscula:

Ejemplo

<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'ejemplo' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>

Pruébalo »

Los filtros se pueden encadenar:

{{ message | filterA | filterB }}

Los filtros son funciones de JavaScript, por lo tanto pueden aceptar argumentos:

{{ message | filterA('arg1', arg2) }}

Aquí, message es el primer argumento; la cadena 'arg1' se pasará al filtro como segundo argumento, y el valor de la expresión arg2 se evaluará y luego se pasará al filtro como tercer argumento.

Abreviaturas

Abreviatura de v-bind

Vue.js proporciona abreviaturas especiales para las dos directivas más utilizadas:

<!-- 完整语法 -->
<a v-bind:href="url.html"></a>
<!-- 缩写 -->
<a :href="url.html"></a>

Abreviatura de v-on

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

Otras extensiones