Vue事件

1、写法及事件绑定

写法：在methods中写方法,供事件或者别的方法内部调用（es5、es6的方法都可以）。

绑定事件的指令：1、v-on   2、@，两种方法后面都跟事件类型,值就是methds中的方法,可以加小括号也可以不加

   <div id="app">
      <button v-on:click="fn1()">{{aa}}button>
      <button @click="fn2">{{aa}}button>
      <button @mouseenter="fn3" v-on:mouseout="fn4()">{{aa}}button>
   div>

         var fn4=function(){
            console.log(4444)
         }
    
 
        new Vue(
            {
            el:"#app",
            data:{
                aa:"点击一下"
            },
            methods: {
                fn1:function(){
                    console.log(1111)
                },
                fn2(){
                    console.log(2222)
                },
                fn3:()=>{
                    console.log(3333)
                },
                fn4
 
            },
        }
        )

 点击第一个按钮控制台会打印1111

点击第二个按钮控制台会打印2222

鼠标进入第三个按钮控制台会打印3333

鼠标移出第三个按钮控制台会打印4444

2.事件修饰符

• .stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为

• .prevent 阻止默认事件(静默)

• .capture 添加事件侦听器时让事件在捕获阶段触发

• .self  触发对象只能是自己才会发生，捕获和冒泡都不能触发（但依然该对象在事件链里）

• .once 事件只触发一次,触发完之后,事件就解绑

• 多修饰符一起使用:连点

  <style>
      .aa {
          width: 300px;
          height: 300px;
          background-color: rgb(211, 172, 172);
      }
   
      .bb {
          width: 200px;
          height: 200px;
          background-color: rgb(117, 206, 114);
      }
   
      .cc {
          width: 100px;
          height: 100px;
          background-color: rgb(131, 160, 223);
      }
  style>
   
      <div class="app">
          <div class="aa" v-on:click="fn1()">3
              <div class="bb" @click="fn2">2
                  <div class="cc" @click="fn3">1div>
              div>
          div>
      div>
  

          new Vue({
              el: ".app",
              data: {
   
   
              },
              methods: {
                  fn1() {
                      console.log(3333)
                  },
                  fn3: () => {
                      console.log(1111)
                  },
                  fn2:function(){
                      console.log(2222)
                  }
              },
          })
  

  界面如图：

  修改以下代码时：

                 

                 

  1

  点击1处时，只会打印1111

                 

             

  2

  点击2时，只会打印2222，且点击其他地方，无论冒泡还是捕获都无法获取到2222

                 

             

  2

  点击2时，会打印2222，3333，之后再点击时只会打印3333