Introducción
Los atributos y eventos de los elementos html en vue admiten la modificación dinámica a través de variables, que es algo diferente de la operación js dom original. Aquí hay un resumen del método de vinculación de propiedades y vinculación de eventos de vue, y la comparación con js nativos.
Vinculación de propiedad
El enlace de atributo se refiere a establecer un valor de atributo de un elemento html en una variable.
En html nativo, como <input type = "text" />, el valor del tipo aquí es texto.
En Vue, podemos establecer texto en una variable: input_type.
Se puede escribir como <input: type = "input_type" />, aquí hay un enlace de atributo vue, el valor del tipo cambiará con el cambio de input_type .
Sintaxis de enlace de propiedad
Hay dos formas de escribir enlaces de propiedad
- : attr = "var"
- v-bind: attr = "var"
El ejemplo anterior escribe <input: type = "input_type" />, que corresponde a la primera forma de escritura; también se puede escribir como <input v-bind: type = "input_type" />. Los proyectos generalmente usan la primera abreviatura.
Comparar js nativos
Si usa js nativo para manipular los atributos del elemento dom, generalmente obtiene primero el elemento de entrada y luego modifica el elemento de entrada a través del método de configuración de atributos js.
Enlace de eventos
De manera similar a la vinculación de atributos, los eventos en elementos html también se pueden vincular a una variable específica, como <button @ click = "changeType ()"> </button>.
Aquí, el método de clic está vinculado a la función changeType. Al hacer clic en este botón, se llamará a la función changeType.
También hay dos formas de escribir el enlace de eventos
- @ event = "manejador de eventos (param ..)"
- v-on: event = "eventhandler (param ..)"
evento representa un evento, como un clic. Eventhandler se refiere a la función de procesamiento, que puede pasar variables (una o más), recuerde que la función de enlace de atributos debe tener (), no solo un nombre de función.
<button id = 'testBtn' @ click = "changeType ()"> </button> corresponde a la primera forma de escritura.
También se puede escribir como <button id = 'testBtn' v-on: click = "changeType ()"> </button>. Generalmente, se usa el primer método.
Comparar js nativos
Si usa js nativo para vincular eventos, puede configurar la supervisión de eventos y la vinculación de eventos para los elementos.
Método de vinculación #jsEvent, solo se puede vincular un evento al botón
document.getElementById ("testBtn"). onclick = changeType;
método de supervisión #jsEvent, se pueden vincular varios eventos al botón
document.getElementById ("testBtn") .addEventListener ("clic", changeType);
Los elementos en vue usan monitoreo de eventos js nativo, como un componente de vue personalizado ms-nav. Quiero vincular un evento de clic a este componente, que no surte efecto en circunstancias normales.
# Aquí debería agregar .native para indicar que está escuchando eventos js nativos <ms-nav @ click.native = 'handleJsClick'> </ms-nav>
Ejemplos practicos
Enlace de atributos de Vue y fragmentos de código de enlace de eventos
<input v-bind: type = "input_type" />
<button @ click = "changeType ()"> </button>
exportar predeterminado {
data () {
return {
input_type: 'text'
}
}, métodos:
{
changeType ( ) {
this.input_type = "radio"
}
}
}
Blogger: prueba para ganar dinero
Lema: Centrarse en las pruebas y la automatización, y esforzarse por mejorar la eficiencia de la I + D; a través de las pruebas y la diligencia para completar la acumulación original, a través de la lectura y la gestión financiera hasta la libertad financiera.
csdn: https://blog.csdn.net/ccgshigao
Blog Park: https://www.cnblogs.com/qa-freeroad/