vue基础复习-课时08

目录

事件处理

模板语法

事件处理

事件监听

  Add 1
  
The button above has been clicked {{ counter }} times.

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

类别	于模板中	于方法中
写法	v-on:click	$on(click)
用时

事处理器

于方法中

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

键盘

松开按键：keyup

按键别名

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

定义

Vue.config.keyCodes.f1 = 112

使用

v-on:keyup.f

系统

.ctrl
.alt
.shift
.meta

Do something