<div id="example-2">
<button v-on:click="greet">Greet</button>
</div> var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
methods: {
greet: function (event) {
alert('Hello ' + this.name + '!')
if (event) {
alert(event.target.tagName)
}
}
}
})

在内联语句处理器中访问原生 DOM 事件

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button> methods: {
warn: function (message, event) {
if (event) event.preventDefault()
alert(message)
}
}

事件修饰符

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

键值修饰符

<!-- 只有在 keyCode 是  时调用 vm.submit() -->
<input v-on:keyup.="submit"> 按键别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit"> 常用按键别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes 对象自定义键值修饰符别名:
Vue.config.keyCodes.f1 =

修饰键

附加按键:
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

鼠标按钮修饰键:

.left
.right
.middle

在html中监听事件优点:解耦,无须清理

vue-6-事件处理的更多相关文章

  1. vue基础——事件处理

    监听事件 可以用 v-on 指令监听dom事件,并在触发时运行一些JavaScript代码. 示例: <div id="example-1"> HTML <but ...

  2. 一起学Vue之事件处理

    在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发 ...

  3. Vue.js事件处理

    Vue.js事件处理 1.v-on指令 用法如下:使用v-on:指令指定其执行的具体内容或者方法名即可. <button v-on:click='num++'>giao</butto ...

  4. 前端框架之Vue(7)-事件处理

    监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: <div id="example-1"> <butt ...

  5. 【04】Vue 之 事件处理

    4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...

  6. vue基础---事件处理

    (1)事件监听 v-on 指令监听 DOM 事件,并在触发时运行JS代码 <div class="event_area"> {{message}} <button ...

  7. VUE:事件处理和表单输入绑定

    事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. 浅入深出Vue:事件处理

    上一篇的最后留下了一个 v-on的思考,也就是本章的主题:事件处理 为什么需要事件处理 在前端开发中,经常要面对各种表单.按钮.而这里面就住着一个事件:点击 (click). 前端童鞋们肯定不陌生它, ...

  9. vue之事件处理

    一.事件处理方法 1.格式 完整格式:v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)"  缩写格式:@事件名="函数名&qu ...

  10. vue的事件处理梳理

    一.事件函数 1.v-on绑定click,执行一个函数 <input type="button" v-on:click="test" value=&quo ...

随机推荐

  1. (转)基于C#的socket编程的TCP异步实现

    一.摘要 本篇博文阐述基于TCP通信协议的异步实现. 二.实验平台 Visual Studio 2010 三.异步通信实现原理及常用方法 3.1 建立连接 在同步模式中,在服务器上使用Accept方法 ...

  2. Effective java 系列之避免过度同步和不要使用原生态类型,优先考虑泛型

    避免过度同步(67):在一个被同步的方法或代码块中,不要调用哪些被设计成被覆盖的方法或者是由客户端以函数对象的形式提供的方法(21). 有点拗口,书上提供的创建者与观察者模式,add方法太多,看得眼花 ...

  3. jdk8新特性:在用Repository实体查询是总是提示要java.util.Optional, 原 Inferred type 'S' for type parameter 'S' is not within its bound;

    jdk8新特性:在用Repository实体查询是总是提示要java.util.Optional 在使用springboot 方法报错: Inferred type 'S' for type para ...

  4. (转) 6 ways of mean-centering data in R

    6 ways of mean-centering data in R 怎么scale我们的数据? 还是要看我们自己数据的特征. 如何找到我们数据的中心? Cluster analysis with K ...

  5. 2018-02-16 GetSameTypeQuestion

    '目前存在的BUG '图片补丁存在多个URL Private Declare Function URLDownloadToFile Lib "urlmon" Alias " ...

  6. 配置Tomcat配置路径

    <Host name="localhost" appBase="webapps" unpackWARs="true" autoDepl ...

  7. vue基础 (三) 自动化工具(Vue CIL)

    一.自动化工具(Vue CIL) 安装过程 1. 先安装nvm 参考:https://www.jianshu.com/p/d0e0935b150a https://www.cnblogs.com/tj ...

  8. vue 基础(一)

    一 vue.js的M-V-VM思想 MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式. 1.Model指代的就是vue对象的data属性里面的数据.这里的数 ...

  9. k8s问题收集

    问题 解决 failed: rpc error: code = Unknown desc = NetworkPlugin cni failed to set up pod "*****&qu ...

  10. vue项目中引入第三方框架

    element-ui npm install element-ui -- save; main.js中 import Element from 'element-ui'; import 'elemen ...