Procesador de métodos
Puede usar el comando V-on para escuchar eventos DOM:
<div id = "Ejemplo"> <botón v-on: click = "greet"> greet </boton> </div>
Vinculamos un controlador de eventos de clic a un método de salud. El siguiente es el método definido en la instancia VUE:
var vm = new Vue ({el: '#Example', Data: {name: 'vue.js'}, // Define los métodos en el objeto `métodos`: {greet: function (event) {// en el método` este 'punto a vm alerta (' hello ' + this.name +'! ' También puede llamar al método vm.greet () en el código JavaScript // -> '¡Hola vue.js!'Pruébalo tú mismo
Procesador de declaración en línea
Además de vincularse directamente a un método, también puede usar declaraciones en línea de JavaScript:
<div id = "Ejemplo-2"> <botón v-on: click = "say ('Hi')"> Di Hi </Button> <Button V-ON: Click = "Say ('What')"> Say What </Button> </Div> nuevo vue ({el: '#Ejemplo-2', Métodos: {say: function (msg) {alert (msg)}}})Similar a las expresiones en línea, el controlador de eventos se limita a una declaración.
A veces también es necesario acceder a eventos DOM nativos en el procesador de declaración en línea. Puede usar el evento de variable especial $ para pasarlo al método:
<botón v-on: click = "say ('¡Hola!', $ Event)"> Enviar </botón>
// ... Métodos: {say: function (msg, event) {// Ahora podemos acceder al objeto nativo de eventos event.preventDefault ()}}Modificador de eventos
En los procesadores de eventos, a menudo se requiere event.preventDefault () o event.stoppropagation (). Aunque podemos hacerlo fácilmente dentro de un método, sería mejor que el método sea una lógica de datos puro sin manejar los detalles del evento DOM.
Para resolver este problema, Vue.js proporciona V-On con dos modificadores de eventos: .Prevent y .stop. ¿Recuerdas que el modificador es el sufijo de instrucciones que comienza con el punto?
< V-on: enviar.prevent> </orm>
1.0.16 Se agregaron dos modificadores adicionales:
<
Modificador de llave
Al escuchar eventos de teclado, a menudo necesitamos detectar el código de teclas. Vue.js permite agregar modificadores clave a V-ON:
<!-VM.SubMit () se llama solo cuando el código de teclas es 13-> <Entrada V-ON: KeyUp.13 = "Subt">
Recuerde que todos los códigos clave son difíciles, Vue.js proporciona alias para las claves más utilizadas:
<
Todos los alias clave:
•ingresar
•pestaña
•borrar
• ESC
•espacio
•arriba
•abajo
•izquierda
•bien
1.0.8+: admite alias clave de una sola letra.
1.0.17+: puede personalizar el alias clave:
// puede usar @keyup.f1vue.directive ('on'). Keycodes.f1 = 112¿Por qué escuchar eventos en HTML?
Es posible que haya notado que este tipo de método de monitoreo de eventos va en contra del concepto tradicional de "separación de preocupación". No se preocupe, porque todos los métodos y expresiones de manejo de eventos Vue.js están estrictamente vinculados al Modelo View de la vista actual, y no causará dificultades de mantenimiento. De hecho, hay varios beneficios al usar V-ON:
1. Escanee la plantilla HTML y puede localizar fácilmente los métodos correspondientes en el código JavaScript.
2. Debido a que no tiene que vincular eventos manualmente en JavaScript, su código ViewModel puede ser muy pura lógica, completamente desacoplada del DOM, lo que facilita la prueba.
3. Cuando se destruye un modelo ViewModel, todos los procesadores de eventos se eliminarán automáticamente. No tiene que preocuparse por cómo limpiarlos usted mismo.
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.