Sintaxis de plantillas de Vue3

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

El núcleo de Vue 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 de manera inteligente el costo mínimo de volver a renderizar los componentes y aplicarlo a las operaciones del DOM.

Ejemplo

<template>
  <div>
    <!--Interpolación-->
    <p>{{ message }}</p>
   
    <!-- v-bind -->
    <a :href="url">Link</a>
   
    <!-- v-on -->
    <button @click="handleClick">Click me</button>
   
    <!-- v-for -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

Interpolación

Texto

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

Interpolación de texto

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

Pruébalo »

{{...}}El contenido de la etiqueta será reemplazado pormessageel valor de la propiedad en la instancia del componente correspondiente, simessageel valor de la propiedad cambia,{{...}}el contenido de la etiqueta también se actualizará.

Si no deseas cambiar el contenido de la etiqueta, puedes usarv-oncela directiva para realizar una interpolación única; cuando los datos cambien, el contenido en la interpolación no se actualizará.

<span v-once>这个将不会改变: {{ message }}</span>

Html

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

Directiva v-html

<div id="example1" class="demo"> <p>Utilizando la directiva v-html:</p> <p>¡Aquí se mostrará en rojo!<span v-html="rawHtml"></span></p> </div> <script> const RenderHtmlApp = { data() { return { rawHtml: '<span style="color: red">Pruébalo »</span>' } } } Vue.createApp(RenderHtmlApp).mount('#example1') </script>

Atributos

Atributos

Para los atributos booleanos, el valor normal es true o false; si el valor del atributo es null o undefined, el atributo no se mostrará.

<div v-bind:id="dynamicId"></div>
En el código anterior, si el valor de isButtonDisabled es null o undefined, el atributo disabled ni siquiera se incluirá en el elemento <button> renderizado.
<button v-bind:disabled="isButtonDisabled">按钮</button>

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

Directiva v-bind

Directiva v-bind

<div id="app"> <label for="r1">Directiva v-bind:class</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}">Pruébalo »</div> </div> <script> const app = { data() { return { use: false } } } Vue.createApp(app).mount('#app') </script>

Expresiones

Expresiones

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">Pruébalo »</div> </div> <script> const app = { data() { return { ok: true, message: 'EJEMPLO!!', id: 1 } } } Vue.createApp(app).mount('#app') </script>

Las expresiones se analizan como JavaScript en el ámbito de datos de la instancia activa actual. Hay una limitación: cada enlace solo puede contener una única expresión, por lo que los siguientes ejemplos no funcionarán:

Directivas

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

Directivas

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

Ejemplo

Ejemplo

<div id="app"> <p v-if="seen">const app = { data() { return { seen: true /* cámbialo a false y la información no se mostrará */ } } } Vue.createApp(app).mount('#app')</p> </div> <script>Pruébalo »</script>

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

Además, hay muchas otras directivas, cada una con una función especial. Por ejemplo, la directiva v-for puede enlazar datos de una matriz para representar una lista de elementos:

Ejemplo

Ejemplo

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Ejemplo' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Parámetros

Parámetros

Ejemplo

Ejemplo

<div id="app"> <p><a v-bind:href="url">Pruébalo »</a></p> </div> <script> const app = { data() { return { url: 'https://www.example.com' } } } Vue.createApp(app).mount('#app') </script>

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

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

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

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

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

Modificadores

Modificadores

que se utilizan para señalar que una directiva debe enlazarse de manera especial. Por ejemplo,.el modificador le dice a la.preventdirectiva que, para el evento desencadenado, invoquev-onEntrada del usuarioevent.preventDefault()：

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

Entrada del usuario

Enlace de datos bidireccional

Enlace de datos bidireccional

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> const app = { data() { return { message: 'Ejemplo!' } } } Vue.createApp(app).mount('#app') </script>

La directiva se utiliza para crear un enlace de datos bidireccional en elementos de control de formulario como input, select, textarea, checkbox, radio, etc., y actualiza automáticamente el valor del elemento enlazado según el valor del formulario.

v-modelPodemos usar v-on para escuchar eventos en el botón 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 cadena

Inversión de cadena

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Invertir cadena</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Pruébalo »</button> </div> <script> const app = { data() { return { message: 'Ejemplo!' } }, methods: { reverseMessage() { this.message = this.message .split('') .reverse() .join('') } } } Vue.createApp(app).mount('#app') </script>

Abreviaturas

Abreviaturas

Abreviatura de v-bind

Abreviatura de v-on

<!-- 完整语法 -->
<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>
AI pensando...