vue-6-事件处理
<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-事件处理的更多相关文章
- vue基础——事件处理
监听事件 可以用 v-on 指令监听dom事件,并在触发时运行一些JavaScript代码. 示例: <div id="example-1"> HTML <but ...
- 一起学Vue之事件处理
在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发 ...
- Vue.js事件处理
Vue.js事件处理 1.v-on指令 用法如下:使用v-on:指令指定其执行的具体内容或者方法名即可. <button v-on:click='num++'>giao</butto ...
- 前端框架之Vue(7)-事件处理
监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: <div id="example-1"> <butt ...
- 【04】Vue 之 事件处理
4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...
- vue基础---事件处理
(1)事件监听 v-on 指令监听 DOM 事件,并在触发时运行JS代码 <div class="event_area"> {{message}} <button ...
- VUE:事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 浅入深出Vue:事件处理
上一篇的最后留下了一个 v-on的思考,也就是本章的主题:事件处理 为什么需要事件处理 在前端开发中,经常要面对各种表单.按钮.而这里面就住着一个事件:点击 (click). 前端童鞋们肯定不陌生它, ...
- vue之事件处理
一.事件处理方法 1.格式 完整格式:v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)" 缩写格式:@事件名="函数名&qu ...
- vue的事件处理梳理
一.事件函数 1.v-on绑定click,执行一个函数 <input type="button" v-on:click="test" value=&quo ...
随机推荐
- learn python the hard way 习题6~10总结
习题6总结 定义字符串: 名字 = 值 其他 你也可以用 {types_of_people}的方式把它放在任何字符串中. 也就是说你可以在其他字符串中添加{},然后前面加一个 f,可用print()进 ...
- Spring之Spel表达式
正常业务场景一般不用这个技术,但需要知道有这么个东西支持Spring. 记忆力不好,抄了些套路代码便于以后用到. package com.paic.phssp.springtest.spel; imp ...
- You Don't Know JS: Scope & Closures (第3章: 函数 vs 块作用域)
第二章,作用域由一系列的bubbles组成.每一个都代表了一个container或bucket,装着被声明的identifiers(variables, functions).这些bubbles相互嵌 ...
- caffe---mnist数据集训练与测试
1.数据.mnist_test_lmdb和mnist_train_lmdb数据 2.路径. (1)修改lenet_train_test.prototxt文件,训练和测试两处 source: " ...
- 原生js实现放大镜
效果: 1. 鼠标放上去会有半透明遮罩.右边会有大图片局部图 2. 鼠标移动时右边的大图片也会局部移动 放大镜的关键原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置 ...
- 移动端rem适配 flex.js
(function() { document.addEventListener('DOMContentLoaded', function () { var html = document.docume ...
- linux删除文件后不释放磁盘的问题
1. 用df 检查发现根目录可用空间越为200M # df -h Filesystem Size Used Avail Use% Mounted on /dev/xvde1 .9G .4G 232M ...
- python模块安装注意事项
在安装python的第三方模块时,需要注意路径问题. 1.如果python是按默认位置安装的,则可以直接在命令提示符中进行安装,即pip install module_name. 2.如果python ...
- MSSQL2012中SQL调优(SQL TUNING)时CBO支持和常用的hints
虽然当前各关系库CBO都已经非常先进和智能,但因为关系库理论和实现上的限制,CBO在特殊场景下也会给出次优甚至存在严重性能问题的执行计划,而这些场景中,有一部分只能或适合通过关系库提供的hints来进 ...
- Intel daal数据预处理
https://software.intel.com/en-us/daal-programming-guide-datasource-featureextraction-py # file: data ...