VUE-基础三 - 事件监听

在前端开发中经常和用户交互就需要用到事件监听。

vue的监听命令是v-on，简写为@

点击事件

<button v-on:click="sub">-</button>
<input type="text" size="2" v-model="num">
<button @click="add($event)">+</button>

js编写

add(e){
      console.log(e);
      this.num++;
    },
    sub(){
      this.num--;
    }

 点击加减可以影响输入框的数字。

v-on 事件修饰符号

.stop 阻止事件冒泡

  <div id="box2" @click="one()">
    <div id="box" @click="two()">
      <button @click="three">按钮</button>
    </div>
  </div>

one(){
      console.log(111111111);
    },
    two(){
      console.log(22222222);
    },
    three(){
      console.log(33333333);
    }

点击后打印如下：

从里往外冒泡，如果要阻止冒泡可以添加.stop如下：

      <button @click.stop="three">按钮</button>

.self 当事件在该元素本身触发时才触发事件

也就是点击元素本身才触发例如：

<div id="box" @click.self="two()">

给box添加了self之后，

就只有点击该元素才会打印数据。

.prevent 阻止默认事件

<a href="www.baidu.com" @click.prevent="one">阻止默认事件</a>

只要在事件后面添加.prevent后，元素自带的事件就失效了