[Vue3 Knowledge Lecture 4] Explicación detallada del enlace de datos bidireccional, enlace de eventos y modificadores de eventos

Directorio de artículos

1. Enlace de datos bidireccional

¿Qué es el enlace bidireccional de datos?

Cuando los datos cambian, la vista cambia en consecuencia.
Cuando la vista cambia, los datos también cambiarán sincrónicamente.

Plataforma de gestión digital
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
sistema de permisos-
Dirección del blog personal del centro comercial

Instrucciones de encuadernación bidireccional

La directiva v-model implementa enlace de datos bidireccional

Escenarios de uso de enlace bidireccional

Utilice la directiva v-model para limitar el uso en componentes de área de texto seleccionados de entrada (componentes)

Ejemplo:
Insertar descripción de la imagen aquí
modificador

.lazy De forma predeterminada, v-model actualizará los datos después de cada evento de entrada (excepto el estado de la fase de ortografía del IME). En su lugar, puede agregar el modificador diferido para actualizar los datos después de cada evento de cambio.
.number Si desea que la entrada del usuario se convierta automáticamente en números, puede agregar el modificador .number después de v-model para administrar la entrada
.trim Si desea eliminar automáticamente los espacios en ambos extremos de la entrada del usuario de forma predeterminada, puede agregar el modificador .trim después de v-model

<div><input type="text" v-model.lazy="data"></div>
<div><input type="text" v-model.number.trim="numData" @change="checkType"></div>

2. Explicación detallada del enlace de eventos.

2.1 Instrucciones de vinculación de eventos en Vue

uso de la directiva v-on
```
<button v-on:click="fn">v-on</button>
```
Las directivas se pueden abreviar como @ (azúcar sintáctico)
```
<button @click="fn2">@语法糖</button>
```

2.2 Cómo llamar a la función de evento

Vincular el nombre de la función directamente
```
<button v-on:click="fn">v-on</button>
```

Funciones de llamada

<button v-on:click="fn()">v-on</button>

2.3 Paso de parámetros de función de evento

Parámetros comunes: varios parámetros están separados por comas
```
<button v-on:click="fn(10,20,30)">v-on</button>
```
Objeto de evento:

Consejo 1: si el evento está directamente vinculado al nombre de la función o la función se llama sin pasar ningún parámetro, la función del evento pasará el objeto del evento como primer parámetro de forma predeterminada;

consejo 2: si se pasan parámetros cuando se llama a la función de enlace de eventos, el objeto de evento debe pasarse explícitamente como último parámetro y el nombre del objeto de evento debe ser $event

Consejo 3: Si no se consideran problemas de compatibilidad y se permite la existencia del objeto global de ventana, el objeto de evento window.event se puede obtener directamente a través del objeto global en la función, se recomienda utilizar el método de paso de parámetros.
Maletín pequeño: Carro de compras mostrador simple Ideas

de implementación

El número de cantidad inicial está definido en los datos.
Establezca num en la etiqueta correspondiente usando "expresión de interpolación" o "directiva v-text"
Utilice la directiva v-on para definir eventos de clic para agregar y reducir para los botones de agregar y restar.
Defina la lógica de los métodos de agregar y reducir en métodos: el número mínimo es 1 y el número máximo es 20

3. Modificadores de eventos

3.1 Modificadores de eventos de uso común en Vue

.stop deja de burbujear
.prevent Cancelar el evento predeterminado
El controlador de eventos .self solo se activará si event.target es el elemento en sí
capture.capture Utilice el modo de captura al agregar detectores de eventos
El evento .once se activa como máximo una vez

El modificador .passive se usa generalmente en detectores de eventos táctiles y puede usarse para mejorar el rendimiento de desplazamiento de los dispositivos móviles. No se puede utilizar con .prevent.

// 通过 .stop 修饰符阻止事件冒泡行为
<div class="out" @click="fn2">
    外部容器
    <div class="in" @click.stop="fn">内部容器</div>
</div>

//通过 .prevent 修饰符阻止 a 标签默认跳转功能
<a href="http://www.baidu.com" @click.prevent="cancel">跳转百度</a>

//链式修改
<a @click.stop.prevent="doThat"></a>

3.2 Modificadores clave

.enter => ingresar clave
.tab => tecla de tabulación
.delete (captura las teclas "eliminar" y "retroceso") => tecla eliminar
.esc => Tecla Cancelar
.espacio => barra espaciadora
.arriba => arriba
.abajo => abajo
.izquierda => izquierda

.derecha => derecha

// .enter 回车键
<div class="login">
      <p><label>用户名：<input type="text" v-model="username" placeholder="请输入用户名"></label></p>
      <!-- 按键修饰符 .enter 触发回车键 -->
      <p><label>密码：<input type="password" v-model="password" placeholder="请输入密码" @keyup.enter="login"></label></p>
      <button @click="login">登录</button>
  </div>
  
// .delete 删除建
<input @keyup.delete='submit'/>

4. Vinculación de atributos

La directiva v-bind se utiliza para actualizar los atributos HTML de forma responsiva

Sintaxis v-bind:prop = val

Azúcar sintáctico: prop = val

//属性绑定
<h2 v-bind:title="title">属性绑定演示</h2>
<p :class="ft20">语法糖</p>
<div v-bind="{id:‘container’,class:'wrapper'}"></div>

Nota: La sintaxis del azúcar es una simplificación de una determinada operación para mejorar la eficiencia del desarrollo.

5. Vinculación de clases y estilos.

5.1 Vinculación de clase

Sintaxis de objeto vinculante

v-bind:class = { nombre de clase: valor de clase, nombre de clase 1: valor de clase 1,..., nombre de clase n: valor de clase n }

Si el valor correspondiente al nombre de la clase es verdadero, se muestra el nombre de la clase; de lo contrario, no se muestra el nombre de la clase.

Vincular sintaxis de matriz

v-bind:clase = [valor1, valor2, ..., valorn]

El valor 1 y el valor 2 corresponden a los datos en data

<script setup>
import {
      
       ref, reactive, computed } from 'vue'

const clsName = "active-link"
// 通过 ref 声明的数据，在 script 中，需要通过 .value 获取和修改值；在 template 模板中使用时，则不需要通过 .value 获取值，模板会自动解析数据
const count = ref(0)

// 注意：这里如果想要在count值修改后，实时响应数据变化，需要采用计算属性
const clsObj = computed(() => ({
      
      
    link: true,
    activeLink: count.value % 2 == 0
}))

let fm = ref(true)
</script>
<template>
    <div>
        <!-- 基于 v-bind 指令，增强绑定 class类 与 style样式，这两个属性值除了可以使用字符串外，还可以使用对象和数组的绑定 -->
        <a href="javascript:;" :class="clsName" class="link" style="text-decoration:none;"
            :style="'font-style:italic;'">超链接标签演示字符串类型的class和style绑定</a>
        <hr>
        <a href="javascript:;" :class="clsObj"
            :style="{ 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }">采用绑定对象的方式实现class和style的赋值</a>
        <hr>
        <a href="javascript:;" :class="['link', 'active-link', { fm }]"
            :style="['letter-spacing:6px;', { 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }]">采用数组绑定的方式实现class和style</a>
    </div>
    <button @click="count++">count++</button>
</template>

<style scoped>
hr {
      
      
    margin: 2vh 0;
}

.link {
      
      
    color: gray;
}

.active-link,
.activeLink {
      
      
    font-weight: bold;
}

.fm {
      
      
    font-family: "楷体";
}
</style>

Encuadernación de estilo 5.2

Sintaxis de objeto vinculante

v-bind:estilo = { nombre de estilo: valor de estilo, nombre de estilo 1: valor de estilo 1,..., nombre de estilo n: valor de estilo n }

Vincular sintaxis de matriz

v-bind:estilo = [valor1, valor2, ..., valorn]

Valor 1, valor 2, ..., valor n necesita usar el estilo de definición de objeto y el valor de estilo en los datos

<script setup>
import {
      
       ref, reactive, computed } from 'vue'

const clsName = "active-link"
// 通过 ref 声明的数据，在 script 中，需要通过 .value 获取和修改值；在 template 模板中使用时，则不需要通过 .value 获取值，模板会自动解析数据
const count = ref(0)

// 注意：这里如果想要在count值修改后，实时响应数据变化，需要采用计算属性
const clsObj = computed(() => ({
      
      
    link: true,
    activeLink: count.value % 2 == 0
}))

let fm = ref(true)
</script>
<template>
    <div>
        <!-- 基于 v-bind 指令，增强绑定 class类 与 style样式，这两个属性值除了可以使用字符串外，还可以使用对象和数组的绑定 -->
        <a href="javascript:;" :class="clsName" class="link" style="text-decoration:none;"
            :style="'font-style:italic;'">超链接标签演示字符串类型的class和style绑定</a>
        <hr>
        <a href="javascript:;" :class="clsObj"
            :style="{ 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }">采用绑定对象的方式实现class和style的赋值</a>
        <hr>
        <a href="javascript:;" :class="['link', 'active-link', { fm }]"
            :style="['letter-spacing:6px;', { 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }]">采用数组绑定的方式实现class和style</a>
    </div>
    <button @click="count++">count++</button>
</template>

<style scoped>
hr {
      
      
    margin: 2vh 0;
}

.link {
      
      
    color: gray;
}

.active-link,
.activeLink {
      
      
    font-weight: bold;
}

.fm {
      
      
    font-family: "楷体";
}
</style>