VUE基础之事件处理（浅析VUE事件修饰符）

VUE基础之事件处理

v-on：something用于绑定事件监听器，监听DOM变化来触发事件（something），可简写为@something。

<div id="app">
  <button type="button" @click="click">点击我获取信息</button>
  <p>{{msg}}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    msg: '等待点击。。。'
  },
  methods: {
    click: function() {
      this.msg = '按钮被点击啦';
    }
  }
});

我们也可以在调用的方法中访问原生DOM事件

<div id="app">
  <input type="text" @change="prompt"/>
  <p>{{msg}}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    msg: '等待输入。。。'
  },
  methods: {
    prompt: function(event) {
      this.msg = event.target.value;
    }
  }
});

事件修饰符：VUE通过事件修饰符为DOM事件进行很多细节上的处理，能让我们更加专注于代码逻辑中。

• .stop：相当于event.stopPropagation()，防止事件冒泡，例子如下：

原本点击按钮应该会出现两次弹窗，但是.stop阻止了事件往外层传递，结果只出现内层弹窗

<div id="app">
  <div @click="outer">
    <button @click.stop="inner">button</button>
  </div>
</div>

var vm = new Vue({
  el: '#app'
  methods: {
    inner: function() {
      alert('这是内层button');
    },
    outer: function() {
      alert('这是外层 div，可是.stop阻止了我');
    }
  }
});

• .prevent：相当于event.preventDefault()，防止执行默认操作，可以只有修饰符不用调用函数。例子如下：

<div id="app">
  <a href="www.baidu.com" @click.prevent>我是一条假链接</a>
</div>

var vm = new Vue({
  el: '#app'
});

• .capture：事件捕捉模式，事件从外到内触发，与事件冒泡含义相反，例子如下：

<div id="app">
  <div @click.capture="outer">
    <button @click .capture="inner">button</button>
  </div>
</div>

var vm = new Vue({
  el: '#app'
  methods: {
    inner: function() {
      alert('这是内层button');
    },
    outer: function() {
      alert('这是外层 div，我会先触发哦~');
    }
  }
});

• .self：只触发自身事件，对父子元素无效，例子如下：

<div id="app">
  <div @click.self="outer">
    <button @click .self="inner">button</button>
  </div>
</div>

var vm = new Vue({
  el: '#app'
  methods: {
    inner: function() {
      alert('这是内层button，你点谁就触发谁');
    },
    outer: function() {
      alert('这是外层 div，你点谁就触发谁');
    }
  }
});

• .once：只触发一次事件，例子如下：

<div id="app">
  <button @click .once=" once ">button</button>
</div>

var vm = new Vue({
  el: '#app'
  methods: {
    once: function() {
      alert('点击事件只会执行一次哦');
    }
  }
});