Monitoreo de eventos vue 06

Monitoreo de eventos de Vue

v-en

problema de transferencia de parámetros v-on

Solo hay un parámetro formal en el método, cuando se llama al método
- Pasar un parámetro
  El valor del parámetro en el método es el valor del parámetro pasado en
- El parámetro
  en el método sin parámetros (no se omiten paréntesis) no está definido
- No se pasan parámetros (omitiendo los paréntesis) de
  forma predeterminada , Vue pasará el evento de evento generado por el navegador como un objeto al método de forma predeterminada

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>1v-on参数问题</title>
</head>
<body>
  <div id="info">
<!--    方法中的形参值为传入的参数值-->
    <button @click="btnClick(123)">按钮1</button>
<!--    方法中的形参为undefined-->
    <button @click="btnClick()">按钮2</button>
<!--    vue默认将浏览器生成的event事件当做对象传入到方法中-->
    <button @click="btnClick">按钮3</button>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const info = new Vue({
    
    
      el : "#info",
      data : {
    
    
      },
      methods : {
    
    
        btnClick(num){
    
    
          console.log(num);
        }
      }
    })
  </script>
</body>
</html>

Hay varios parámetros formales en el método (tome dos parámetros como ejemplo)
- Pasar dos parámetros
  El valor del parámetro en el método es el valor del parámetro pasado en
- Pasar un parámetro El
  primer valor de parámetro es el valor de parámetro pasado, el segundo valor de parámetro no está definido
- No se pasan parámetros (no se omiten paréntesis).
  Ambos valores de parámetros formales no están definidos.
- No se pasan parámetros (se omiten los paréntesis)
  De forma predeterminada , Vue pasará el evento de evento generado por el navegador como un objeto al método, lo asignará al primer parámetro y todos los parámetros posteriores no estarán definidos.
- Suplemento: si desea pasar el evento de evento al método mientras pasa varios parámetros, el evento debe pasarse con $ event

Inserte la descripción de la imagen aquí

modificador v-on

stop : detiene el burbujeo del evento
Suplemento:
Captura de evento : desde el documento hasta el nodo que desencadenó el evento, es decir, de arriba hacia abajo para desencadenar el evento.
Evento burbujeante : desencadena eventos de abajo hacia arriba.

xxx.addEventListener("click", function() {
    
    
        ……
    }, true/false);

El tercer parámetro del método de eventos vinculantes es controlar si la secuencia de activación del evento es una captura de eventos. verdadero: captura de eventos, falso (predeterminado): propagación de eventos. Por lo tanto, cuando activa un evento en un nodo dom, si el nodo externo también establece la función de evento correspondiente, el nodo externo también activará su propia función de evento.

Pruebe el burbujeo de eventos, la captura de eventos es
Inserte la descripción de la imagen aquí
falsa, haga clic en div: solo ejecute div; haga clic en el botón "clic": primero ejecute btn y luego ejecute div (evento burbujeante, de abajo hacia arriba) son

todos verdaderos, haga clic en div: ejecute solo div; haga clic en el botón "hacer clic": primero ejecute el div y luego ejecute el
Inserte la descripción de la imagen aquí
código de prueba btn (captura de eventos, de arriba hacia abajo)

<!--事件捕获，事件冒泡-->
<div id="divdiv">
  divdivdivdiv
  <button id="btnbtn">点一下</button>
</div>
<script>
  // 全为false，即事件冒泡
  document.getElementById('divdiv').addEventListener("click",function () {
     
     
    console.log("false:执行divdiv");
  },false)
  document.getElementById('btnbtn').addEventListener("click",function () {
     
     
    console.log("false:执行btnbtn");
  },false)

  // 全为true，即事件捕获
  document.getElementById("divdiv").addEventListener("click",function (){
     
     
    console.log("true:执行divdiv");
  },true)
  document.getElementById("btnbtn").addEventListener("click",function () {
     
     
    console.log("true:执行btnbtn");
  },true)
</script>

Pruebe el modificador de parada de v-on
Inserte la descripción de la imagen aquí
Haga clic en el botón 1 y

haga clic en el botón 2, para evitar que el evento

burbujee . Haga clic en divdivdivdiv

PS: el código de prueba está en la parte posterior

prevenir : Evita el comportamiento predeterminado del elemento de destino (el elemento debe tener un comportamiento predeterminado para ser cancelado). Tal como:

<a></a>标签的默认行为是点击后自动跳转到指定页面
<input type="submit">标签的默认行为是点击后自动提交
……

Inserte la descripción de la imagen aquí

Haga clic en "CSDN (sin prevenir)"

haga clic en "enviar (sin prevenir)"

haga clic en evitar modificaciones, el comportamiento predeterminado está bloqueado.

PS: código de prueba detrás

{keyCode.key} : se llama cuando se activa una tecla específica en el teclado
Navicat : escuche los eventos nativos del elemento raíz del
componente (agréguelo después de aprender el componente)
una vez : solo llame una vez

Código de prueba

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2v-on修饰符</title>
</head>
<body>
<!--&lt;!&ndash;事件捕获，事件冒泡&ndash;&gt;-->
<!--<div id="divdiv">-->
<!--  divdivdivdiv-->
<!--  <button id="btnbtn">点一下</button>-->
<!--</div>-->
<!--<script>-->
<!--  // // 全为false，即事件冒泡-->
<!--  // document.getElementById('divdiv').addEventListener("click",function () {-->
<!--  //   console.log("false:执行divdiv");-->
<!--  // },false)-->
<!--  // document.getElementById('btnbtn').addEventListener("click",function () {-->
<!--  //   console.log("false:执行btnbtn");-->
<!--  // },false)-->

<!--  // 全为true，即事件捕获-->
<!--  document.getElementById("divdiv").addEventListener("click",function (){
    
    -->
<!--    console.log("true:执行divdiv");-->
<!--  },true)-->
<!--  document.getElementById("btnbtn").addEventListener("click",function () {
    
    -->
<!--    console.log("true:执行btnbtn");-->
<!--  },true)-->
<!--</script>-->

  <div id="info">
<!--    stop修饰符，阻止冒泡事件-->
    <div @click="divClick">
      divdivdivdiv
      <button @click="btn1Click">按钮1</button>
      <button @click.stop="btn2Click">按钮2</button>
    </div>

<!--    prevent修饰符，-->
<!--    无prevent修饰-->
    <div>
      <a href="https://www.csdn.net/" @click="aClick">CSDN(无prevent)</a>
      <form action="xxx">
        <input type="text" value="tell">
        <input type="submit" value="提交(无prevent)" @click="subClick">
      </form>
    </div>
<!--    有prevent修饰-->
    <div>
      <a href="https://www.csdn.net/" @click.prevent="aClick">CSDN</a>
      <form action="xxx">
        <input type="text" value="tell">
        <input type="submit" value="提交" @click.prevent="subClick">
      </form>
    </div>

<!--    {
    
    keyCode|key}修饰符-->
    <div>
      <input type="text" @keydown.space="onSpace">
      <input type="text" @keyup.h="onH">
    </div>
<!--    once修饰符-->
    <button @click.once="onceClick">once修饰符</button>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const info = new Vue({
    
    
      el : "#info",
      data : {
    
    
        message : "vue yyds"
      },
      methods : {
    
    
        // stop修饰符
        btn1Click(){
    
    
          console.log("btn1Clicked");
        },
        btn2Click(){
    
    
          console.log("btn2Clicked");
        },
        divClick(){
    
    
          console.log("divClicked");
        },

        // prevent修饰符
        aClick(){
    
    
          console.log("阻止a标签默认的跳转行为");
        },
        subClick(){
    
    
          console.log("阻止submit默认的提交行为");
        },
        <!--    {
    
    keyCode|key}修饰符-->
        onSpace(){
    
    
          console.log("keydown.space");
        },
        onH(){
    
    
          console.log("keyup.h");
        },
        // once修饰符
        onceClick(){
    
    
          console.log("once只调用一次");
        }
      }
    })
  </script>
</body>
</html>

v-on: input: monitorea la entrada del usuario

Estado inicial
Inserte la descripción de la imagen aquí
Entrada de usuario