方法处理器

可以用 v-on 指令监听 DOM 事件:

<div id="app">
<button v-on:click = "greet">Greet</button>
</div>

Js代码

new Vue({
el: '#app',
data: {
message: '菜鸟教程!'
},
methods:{
greet:function () {
alert("OP");
}
}
})

内联语句处理器

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

<div id="app">
<button v-on:click = "greet('welcome')">Greet</button>
</div>

Js代码

new Vue({
el: '#app',
data: {
message: '菜鸟教程!'
},
methods:{
greet:function (msg) {
alert(msg);
}
}
})

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

<button v-on:click="say('hello!', $event)">Submit</button>

js代码:

new Vue({
el: '#example',
methods: {
say: function (msg, event) {
// 现在我们可以访问原生事件对象
event.preventDefault()
}
}
})

事件修饰符

在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到,不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。为了解决这个问题,Vue.js 为 v-on 提供两个事件修饰符:.prevent 与 .stop

<!-- 阻止单击事件冒泡 -->
<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>

按键修饰符

在监听键盘事件时,我们经常需要检测 keyCodeVue.js允许为v-on添加按键修饰符:

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

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

<!-- 同上 -->
<input v-on:keyup.enter="submit">

常用按键别名:enter、tab、delete、esc、space、up、down、left、right

Vue深度学习(4)-方法与事件处理器的更多相关文章

  1. Vue.js学习 Item8 -- 方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...

  2. 详解Vue 方法与事件处理器

      本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...

  3. Vue深度学习(3)

    基础 Vue.js允许自定义指令,实质上是让你教 Vue一些新技巧:怎样将数据的变化映射到 DOM 的行为.可以使用 Vue.directive(id, definition) 的方法传入指令 id  ...

  4. 远程连接服务器jupyter notebook、浏览器以及深度学习可视化方法

    h1 { counter-reset: h2counter; } h2 { counter-reset: h3counter; } h3 { counter-reset: h4counter; } h ...

  5. go微服务框架go-micro深度学习 rpc方法调用过程详解

    摘要: 上一篇帖子go微服务框架go-micro深度学习(三) Registry服务的注册和发现详细解释了go-micro是如何做服务注册和发现在,服务端注册server信息,client获取serv ...

  6. Vue 方法与事件处理器

    按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 时调用 vm.submit() --> ...

  7. Vue深度学习(5)-过渡效果

    简介 通过 Vue.js 的过渡系统,你可以轻松的为 DOM 节点被插入/移除的过程添加过渡动画效果.Vue 将会在适当的时机添加/移除 CSS 类名来触发 CSS3 过渡/动画效果,你也可以提供相应 ...

  8. Vue深度学习(1)

    Hello World 现在就让我们来写第一个vue.js的实例.如下代码: html代码: <div id="demo"> {{ message }} </di ...

  9. R-CNN,SPP-NET, Fast-R-CNN,Faster-R-CNN, YOLO, SSD, R-FCN系列深度学习检测方法梳理

    1. R-CNN:Rich feature hierarchies for accurate object detection and semantic segmentation 技术路线:selec ...

随机推荐

  1. Python之数据类型-[bisect,heap]

    bisect >>> import bisect >>> >>> b = [ 20, 34, 35, 65, 78 ] >>> ...

  2. Qt----拖拽

    最近比较忙,今天此才有时间来继续学习下Qt.Qt的拖拽可以按字面意思分为拖和拽两部分.一般来说我们常见的拖拽分别由两个程序合作完成.例如我们经常把桌面的文件拖拽进其他目录: 这个拖拽在Qt中由两方合作 ...

  3. mysql b-tree 索引下联合索引的顺序测试方案

    使用联合索引需要注意的列顺序比如在使用select * from user where x=1 and y=2;的时候,应该需要建立的索引可能是 add key(x,y)如何确定索引的顺序一般经验而言 ...

  4. SpringMVC 快速入门

    SpringMVC 快速入门 SpringMVC 简介 SpringMVC是 Spring为展示层提供的基于Web MVC设计模式的请求驱动类型的轻量级Web框架,它的功能和Struts2一样.但比S ...

  5. Minecraft

    描述 Minecraft是一个几乎无所不能的沙盒游戏,玩家可以利用游戏内的各种资源进行创造,搭建自己的世界. 在Minecraft中,基本的建筑元素是边长为1个单位的立方体,Tony想用N个这种小立方 ...

  6. .net 系列:Expression表达式树、lambda、匿名委托 的使用

    首先定义一个泛型委托类型,如下: public delegate T Function<T>(T a, T b); 实现泛型委托的主体代码,并调用: public static strin ...

  7. 跨域请求cookie获取与设置问题

    描述:最近做项目遇到了cookie的问题,项目为前后端分离项目,前台有分外网IP(A外)和内网IP(A内),后台服务只有一个内网IP(B内). 现象:当我前台异步请求发送给后台的时候,后台并不能获取到 ...

  8. php条件语句(二)

    switch 语句用于根据多个不同条件执行不同动作. PHP Switch 语句 如果您希望有选择地执行若干代码块之一,请使用 switch 语句. 语法 switch (n){case label1 ...

  9. JDK1.7中HashMap底层实现原理

    一.数据结构 HashMap中的数据结构是数组+单链表的组合,以键值对(key-value)的形式存储元素的,通过put()和get()方法储存和获取对象. (方块表示Entry对象,横排表示数组ta ...

  10. poj 3431 Expedition 优先队列

    poj 3431 Expedition 优先队列 题目链接: http://poj.org/problem?id=2431 思路: 优先队列.对于一段能够达到的距离,优先选择其中能够加油最多的站点,这 ...