初学VUE——part5

事件处理

事件监听指令：v-on
v-on要接收一个需要调用的方法名称。
例子：

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

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 直接调用方法
example2.greet() // => 'Hello Vue.js!

事件修饰符

修饰符是由点开头的指令后缀来表示。

• .stop 阻止单击事件继续传播
• .prevent 提交事件不再重载页面
• .capture 添加事件监听器时使用事件捕获模式
• .self 即事件不是从内部元素触发的
• .once 点击事件将只会触发一次
• .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发
  修饰符可以串联：
  例子：

<a v-on:click.stop.prevent="doThat"></a>

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

按键码

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

• .ctrl
• .alt
• .shift
• .meta

鼠标按钮修饰符

• .left
• .right
• .middle
  这些修饰符会限制处理函数仅响应特定的鼠标按钮。