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

VUE基础之事件处理

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

  点击我获取信息
  
{{msg}}

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

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

  
  
{{msg}}

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

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

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

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

  

    button
  

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

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

  我是一条假链接

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

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

  

    button
  

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

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

  

    button
  

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

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

  button

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