vue学习笔记-事件监听

最简单的点击事件

"example-1">
  "counter += 1">Add 1
  
The button above has been clicked {{ counter }} times.


var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

点击button一次。触发时运行一些 JavaScript 代码 即counter+1 并更新ui 

 

v-on:click执行一个方法的方式：

"example-2">
  
  "greet">Greet

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

"example-3">
  "say('hi')">Say hi
  "say('what')">Say what

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

"doThis">


"onSubmit">


"doThat">






"doThis">...



"doThat">...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。