vue事件绑定处理
事件监听指令
v-on 指令监听 DOM 事件来触发一些 JavaScript 代码,通常是触发一个函数,简写@
<template>
<div id="app">
<button @click="count += 1">点击加1</button>
<p>这个按钮被点击了{{count}}次</p>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
count: 0
}
}
}
</script>
方法事件处理器
许多事件处理的逻辑都很复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。
<template>
<div id="app">
<button @click="counter">点击加1</button>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
name: 'vue'
}
},
methods: {
counter () {
console.log('hello' + name)
console.log(event.target)
}
}
}
</script>
内联处理器方法
除了直接绑定到一个方法,也可以用内联 JavaScript 语句, 当不传参数时默认会有一个evnet(当前点击的事件) 。如果传入了参数,那么默认的原生DOM就不存在了,
<template>
<div id="app">
<button @click="counter('say')">点击加1</button>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
name: 'vue'
}
},
methods: {
counter (event) {
console.log(event) // 方法里传了参数默认的event对象就不见了
}
}
}
</script>
特殊变量 $event
当方法中传入其他参数,那么如果还需要原生DOM事件的话需要手动传入一个特殊的变量$event,才能获取到事件对象
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法
<template>
<div id="app">
<button @click="counter('say', $event)">点击加1</button>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
name: 'vue'
}
},
methods: {
counter (message, event) {
console.log(message)
if (event) {
console.log(event)
}
}
}
}
</script>
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
once修饰符:不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上,点击事件将只会触发一次也就是说第一次触发事件后,之后再点击都不会触发
<template>
<div id="app">
<!--prevent阻止了a标签默认跳转的事件-->
<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
<div style="width: 200px;height: 200px;background: red" @click="test5">
<div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
</div>
<button @click.once="test7">点击只触发一次</button>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
name: 'vue'
}
},
methods: {
test4 () {
alert('点击了链接')
},
test5 () {
alert('out')
},
test6 () {
alert('inner')
},
test7 () {
alert('点击只触发一次')
}
}
}
</script>
点击百度一下不会跳转,点击蓝色部分触发test6方法,点击红色部分触发test5方法,点击只触发一次按钮一次之后不会在触发
按键修饰符
在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<template>
<div id="app">
<input type="text" @keyup.13="test7">
<input type="text" @keyup.enter="test7">
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
name: 'vue'
}
},
methods: {
test7 () {
alert('按回车键了')
}
}
}
</script>
按键修饰符和事件修饰符一起使用,下面案例第一次在输入框输入数据之后,回车会触发一次,之后再也不会触发
<input type="text" @keyup.enter.once="test7">
vue还提供了其他按键别名——记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名
.enter 、.tab 、.delete (捕获 “删除” 和 “退格” 键) 、.esc 、.space 、.up 、.down 、.left 、.right
新版本新增按键修饰符(多种按键和点击和修饰符组合)
可以用如下修饰符开启鼠标或键盘事件监听,使在按键按下时发生响应。
.ctrl 、.alt 、.shift 、.meta
注意:在Mac系统键盘上,meta对应命令键 (⌘)。在Windows系统键盘meta对应windows徽标键(⊞)。在Sun操作系统键盘上,meta对应实心宝石键 (◆)。在其他特定键盘上,尤其在MIT和Lisp键盘及其后续,比如Knight键盘,space-cadet键盘,meta被标记为“META”。在Symbolics键盘上,meta被标记为“META” 或者 “Meta”。
自定义事件绑定($emit方法)
详情查看:vue的组件详解 这篇文章的组件之间的通信—子组件向外传递事件(自定义事件)
vue事件绑定处理的更多相关文章
- Vue事件绑定原理
Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...
- Vue - 事件绑定
1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...
- vue事件绑定
事件绑定 vue官方文档:<https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%A ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- Vue之事件绑定
Vue事件绑定 点击事件 @click="事件名" or v-on:click="事件名" 结构部分: <el-button type="pri ...
- vue for 绑定事件
vue for 绑定事件 <div id="pro_list" v-for="item in pro_list"> <div class=&q ...
- IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题
先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...
- vue 基础重要组件 模板指令 事件绑定
组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...
- Vue之变量、数据绑定、事件绑定使用举例
vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
随机推荐
- Linux CentOS 虚拟机下联网
这里用VM 提供虚拟环境 虚拟机网络连接模式用的NAT 在编辑处 打开 查看你的子网ip 类型是NAT 的 我们这是是18 192.168.18.~ 去看dhcp 设置看自动分配的地址范围 也可 ...
- App测试流程及测试点(个人整理版)
1 APP测试基本流程 1.1流程图 1.2测试周期测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试时间.正式测试前先向主 ...
- session图片验证码,页面和请求是两个地址。android手机好用,iphone 失效。
问题描述:之前在H5页面用session做了一个验证码.安卓手机好使.但是到苹果就不好使了(页面访问是一个域名地址,ajax请求是用另外的一个ip地址). 详细说明: 验证码请求后台图片正常显示,an ...
- Java学习笔记之——Object类
所有类的祖先 如果一个类没有显式继承,则继承Object 每一个类都直接或间接的是Object的子类 相关API: protected Objectclone() 创建并返回此对象的副本. boole ...
- CSS笔记1:属性--定位
相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块. 元素定位 属性 版本 继承 描述 position c ...
- css3 简易时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 2018-06-21 中文代码示例视频演示Python入门教程第五章 数据结构
知乎原链 续前作: 中文代码示例视频演示Python入门教程第四章 控制流 对应在线文档: 5. Data Structures 这一章起初还是采取了尽量与原例程相近的汉化方式, 但有些语义较偏(如T ...
- 2017-11-09 中英文代码对比系列之Java一例
原文: https://zhuanlan.zhihu.com/p/30905033. 作者为本人. 这个系列将对同一段代码进行中文命名和英文命名两个版本的比较. 目的包括, 演示中文命名, 发现命名时 ...
- Python相关机器学习‘武器库’
开始学习Python,之后渐渐成为我学习工作中的第一辅助脚本语言,虽然开发语言是Java,但平时的很多文本数据处理任务都交给了Python.这些年来,接触和使用了很多Python工具包,特别是在文本处 ...
- 如何用ABP框架快速完成项目(5) - 用ABP一个人快速完成项目(1) - 使用代码生成器
用ABP一个人快速完成项目有如下要点: 站在巨人的肩膀上 - 使用代码生成器 站在巨人的肩膀上 - 使用成熟控件框架, 一个框架不够就上两个, 两个不够就上三个 通过微服务模式而不是盖楼式来避免难度升 ...