vue事件处理器

监听事件

可以用v-on指令监听DOM事件来触发一些JavaScript代码

<div id="example-1">
    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
var example1 = new Vue({
    el: '#example-1',
    data: {
        counter: 0
    }
})
</script>

方法事件处理器

许多事件处理的逻辑都很复杂,所以直接把JavaScript代码写在v-on指令中是不可行的;因此v-on可以接收一个定义

的方法来调用

<div id="example-2">
    <button v-on:click="greet">Greet</button>
</div>
<script>
var example2 = new Vue({
    el: '#example-2',
    data: {
        name: 'Vue.js'
    },
    methods: {
        greet: function (event) {
            // `this` 在方法里指当前 Vue 实例
            alert('Hello ' + this.name + '!')
            // `event` 是原生 DOM 事件
            if (event) {
                alert(event.target.tagName)
            }
        }
    }
})
// 也可以用JavaScript直接调用方法
// example2.greet() // -> 'Hello Vue.js!'
</script>

内联处理器方法

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

<div id="example-3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
    el: '#example-3',
    methods: {
        say: function (message) {
            alert(message)
        }
    }
})
</script>

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

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
<script>
methods: {
    warn: function (message, event) {
        // 现在我们可以访问原生事件对象
        if (event) event.preventDefault()
            alert(message)
    }
}
</script>

事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是常见的需求;尽管我们可以在

methods中轻松实现这点,但更好的方式是:methods只有纯粹的数据逻辑,而不是去处理DOM事件细节

为了解决这个问题,Vue.js为v-on提供了 事件修饰符;通过由点(.)表示的指令后缀来调用修饰符

eg.stop/.prevent/.capture/.self/.once

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(比如不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

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

@click.self.prevent只会阻止元素上的点击

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能对原生的DOM事件起作用的修饰符,.once修饰符还能被用到自定义的组件事件上

键值修饰符

在监听键盘事件时,我们经常需要监测常见的键值;Vue允许为v-on在监听键盘事件时添加关键修饰符:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名:.enter/.tab/.delete (捕获“删除”和“退格”键)/.esc/.space/.up/.down/.left/.right;
可以通过全局config.keyCodes对象自定义键值修饰符别名:

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

修饰键

可以用如下修饰符开启鼠标或键盘事件监听,使在按键按下时发生响应:.ctrl/.alt/.shift/.meta

注意:在Mac系统键盘上meta对应命令键 (⌘)。在Windows系统键盘meta对应windows徽标键(⊞)。在Sun操作系统键

盘上meta对应实心宝石键 (◆)。在其他特定键盘上,尤其在MIT和Lisp键盘及其后续,比如Knight键盘,space-

cadet键盘,meta被标记为“META”。在Symbolics键盘上,meta被标记为“META”或“Meta”

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

修饰键比正常的按键不同;修饰键和keyup事件一起用时,事件引发必须按下正常的按键。换种说法:如果要引发

keyup.ctrl,必须按下ctrl时释放其他的按键;单单释放ctrl不会引发事件

滑鼠按键修饰符

.left/.right/.middle;这些修饰符会限制处理程序监听特定的滑鼠按键

为什么在html中监听事件

你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念。不必担心,因为所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它不会导致任何维护上的困难。实际上,使用v-on有几个好处:

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

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

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

时间: 2017-08-10

vue事件处理器的相关文章

Vue方法与事件处理器详解_javascript技巧

本文实例为大家分享了Vue方法与事件处理器的使用,供大家参考,具体内容如下 按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit"> 记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名: <!-- 同上 --> <inpu

Vue.js每天必学之方法与事件处理器_javascript技巧

方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet">Greet</button> </div> 我们绑定了一个单击事件处理器到一个方法 greet.下面在 Vue 实例中定义这个方法: var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `met

《C#多线程编程实战(原书第2版)》——3.6 在线程池中使用等待事件处理器及超时

3.6 在线程池中使用等待事件处理器及超时 本节将描述如何在线程池中对操作实现超时,以及如何在线程池中正确地等待. 3.6.1 准备工作 为了学习本节,你需要安装Visual Studio 2015.除此之外无需其他准备.本节的源代码放置在BookSamples\Chapter3\Recipe5目录中. 3.6.2 实现方式 请执行以下步骤来了解在线程池中实现超时及正确的等待: 1.启动Visual Studio 2015.新建一个C#控制台应用程序项目. 2.在Program.cs文件中加入以

《C++多线程编程实战》——1.8 事件处理器和消息传递接口

1.8 事件处理器和消息传递接口 许多程序都要响应一些事件,例如,当用户按下按键或输入一些文本时.事件处理或程序能响应用户的动作是一种非常重要的机制.如果要在用户按下按键时处理这个事件,就要创建某种监听器,监听按键事件(即,按下的动作). 事件处理器是操作系统调用的一个函数,每次都发送某种类型的消息.例如,在按下按键时发送"已按下",在文本输入时发送"接收到一个字符". 事件处理器非常重要.计时器是经过某段时间后触发的事件.当用户按下键盘上的一个按键,操作系统就引发

jQuery全局Ajax事件处理器

1.  .ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) ) 每当一个Ajax请求完成,jQuery就会触发ajaxComplete事件,在这个时间点所有处理函数会使用.ajaxComplete()方法注册并执行. <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></s

jQuery自定义事件

在JS中,消息的通知是通过事件表达的,当代码库增长到一定的规模就需要考虑将行为和自定义事件进行解耦,通过事件机制可以将类设计为独立的模块,通过事件对外通信提高了程序的开发效率. 了解自定义事件的概念: 类似 DOM 的行为:你在 DOM 节点(包括 document 对象)监听并触发自定义事件.这些事件既可以冒泡,也可以被拦截.这正是 Prototype.jQuery 和 MooTools 所做的.如果事件不能扩散,就必须在触发事件的对象上进行监听. 命名空间:一些框架需要你为事件指定命名空间,

又一款MVVM组件 Vue基础语法和常用指令(1)_javascript技巧

前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue也确实挺火,各种入门博文眼花缭乱,博主也不敢说写得多好,就当是个学习笔记,有兴趣的可以看看. 一.MVVM大比拼 关于MVVM,原来在介绍knockout.js的时候有过讲解,目前市面上比较火的MVVM框架也是一抓一大把,比如常见的有Knockout.js.Vue.js.React.Angularj

详解vue.js组件化开发实践_javascript技巧

前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

最细致的vue.js基础语法 值得收藏!_javascript技巧

介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍. Vue读音/vju:/,和view类似.是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 可以去 这里下载 .自己整理了一个Vue.js的demo, https://github.com/chenhao-ch/demo-vue 快速入门以下代码是Vue.js最简单的例子, 当input中的内容变化时,p节点的内容会跟着变化. <!-- html -