Vue event monitoring 06

Vue event monitoring

v-on

v-on parameter transfer problem

There is only one formal parameter in the method, when the method is called
- Pass a parameter
  The parameter value in the method is the parameter value passed in
- The parameter
  in the method without parameters (no parentheses omitted) is undefined
- No parameters are passed (omitting the parentheses) by
  default , Vue will pass the event event generated by the browser as an object to the method by default

<!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>

There are multiple formal parameters in the method (take two parameters as an example)
- Pass two parameters
  The parameter value in the method is the parameter value passed in
- Pass a parameter The
  first parameter value is the parameter value passed in, the second parameter value is undefined
- No parameters are passed (no parentheses are omitted).
  Both formal parameter values are undefined
- No parameters are passed (parentheses are omitted)
  By default , Vue will pass the event event generated by the browser as an object to the method, assign it to the first parameter, and all subsequent parameters are undefined
- Supplement: If you want to pass the event event to the method while passing multiple parameters, the event should be passed with $event

Insert picture description here

v-on modifier

stop : stop the event from bubbling.
Supplement:
Event capture : from the document to the node that triggered the event, that is, from the top to the bottom to trigger the event.
Event bubbling : trigger events from the bottom up.

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

The third parameter of the binding event method is to control whether the event trigger sequence is event capture. true: event capture, false (default): event bubbling. Therefore, when you trigger an event on a dom node, if the outer node also sets the corresponding event function, the outer node will also trigger its own event function.

Test event bubbling, event capture is
Insert picture description here
all false, click div: only execute div; click "click" button: first execute btn and then execute div (event bubbling, bottom-up) are

all true, click div: execute only div; click the "click" button: execute the div first and then execute the btn (event capture, top-down)
Insert picture description here
test code

<!--事件捕获，事件冒泡-->
<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>

Test the stop modifier of v-on
Insert picture description here
Click button 1 and

click button 2, to prevent the event from bubbling.

Click divdivdivdiv

PS: the test code is at the back

prevent : Prevent the default behavior of the target element (the element must have a default behavior to be cancelled). Such as:

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

Insert picture description here

Click "CSDN (no prevent)"

click "submit (no prevent)"

click prevent modification, the default behavior is blocked

PS: test code behind

{keyCode.key} : Called when a specific key on the keyboard is triggered
Navicat : listen to the native events of the root element of
the component (add it after learning the component)
once : only call once

Test code

<!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: monitor user input

Initial state
Insert picture description here
User input