方法和事件绑定

    <div class="box">
      <!-- 事件绑定 用v-on 后面跟事件触发形式 -->
      <button v-on:click="fn">点击打印</button>
      <!-- 语法糖直接在事件前面加@符号 -->
      <button @click="fm">点击打印</button>
    </div>
    <script>
      new Vue({
        el: ".box",
        data: {},
        // 方法统一放在methods中 供事件或者别的方法调用 由于是做了es6语法处理的 所以所有方法的写法都可以 需要注意的是箭头函数因为this的原因 一般不建议使用
        methods: {
          fn() {
            console.log(6666);
          },
          fm: () => {
            console.log(7777);
          },
          fc: function () {
            console.log(8888);
          },
        },
      });
    </script>

写一个冒泡的经典样式

由事件链可知 当点击box3时 也会触发box1和box2的点击事件 

      .box1 {
        width: 150px;
        height: 150px;
        background-color: aqua;

      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: rgb(255, 157, 0);
      }
      .box3 {
        width: 50px;
        height: 50px;
        background-color: rgb(212, 71, 10);
      }
   <div id="box">
      <div class="box1" @click="fn">
        1
        <div class="box2" @click="fm">
          2
          <div class="box3" @click="fc">3</div>
        </div>
      </div>
    </div>
    <script>
      new Vue({
        el: "#box",
        data: {},
        methods: {
          fn() {
            console.log(1);
          },
          fm() {
            console.log(2);
          },
          fc() {
            console.log(3);
          },
        },
      });
    </script>

 

 事件修饰符

.self  其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件,  虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素 此时点击box2就不会打印1 但是冒泡事件并没有被阻止

   <div class="box1" @click.self="fn">

 .once 事件只触发一次,触发完之后,事件就解绑 点击一次后就会失效

    <div class="box2" @click.once="fm">

.stop可以阻止冒泡 此时点击box3 就只会打印3  然后冒泡被阻止 1 2不会被打印

<div class="box3" @click.stop="fc">3</div>

  .prevent 阻止默认事件

      <a href="http://www.baidu.com" @click.prevent>百度</a>