Vue.js入门-4-事件处理

 

事件处理

监听事件

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

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

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

事件处理方法

`v-on` 还可以接收一个需要调用的方法名称。

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!'

内联处理器中的方法

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

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

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:



// ...
methods: { 
  warn: function (message, event) { 
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
   }
 }

事件修饰符

Vue.js 为 `v-on` 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

– `.stop`
– `.prevent`
– `.capture`
– `.self`
– `.once`





...
...

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

2.1.4 新增



2.3.0 新增


...

Vue 为这些修饰符额外提供了 `.passive` 修饰符来提升移动端的性能。举个例子,在滚动的时候,浏览器会在整个事件处理完毕之后再触发滚动,因为浏览器并不知道这个事件是否在其处理函数中被调用了 `event.preventDefault()`。`.passive` 修饰符用来进一步告诉浏览器这个事件的默认行为不会被取消。

> 不要把 .passive 和 .prevent 一起使用。被动处理函数无法阻止默认的事件行为。

按键修饰符

Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符:



**全部的按键别名:**

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

可以通过全局 `config.keyCodes` 对象自定义按键修饰符别名:

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

自动匹配按键修饰符

2.5.0 新增

你也可直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符:


在上面的例子中,处理函数仅在 `$event.key === ‘PageDown’` 时被调用。

系统修饰键

2.1.0 新增

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

– `.ctrl`
– `.alt`
– `.shift`
– `.meta`





Do something

> 请注意修饰键与常规按键不同,在和 `keyup` 事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住 `ctrl` 的情况下释放其它按键,才能触发 `keyup.ctrl`。而单单释放 `ctrl` 也不会触发事件。

.exact 修饰符

`.exact` 修饰符允许你控制由精确的系统修饰符组合触发的事件。









鼠标按钮修饰符

2.1.0 新增

– `.left`
– `.right`
– `.middle`

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

为什么在HTML中监听事件

使用 `v-on` 有几个好处:

– 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

– 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

– 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

本站所有文章均由网友分享,仅用于参考学习用,请勿直接转载,如有侵权,请联系网站客服删除相关文章。若由于商用引起版权纠纷,一切责任均由使用者承担
极客文库 » Vue.js入门-4-事件处理

Leave a Reply

欢迎加入「极客文库」,成为原创作者从这里开始!

立即加入 了解更多