Vue.js 事件处理器 v-on

简介:

Vue.js官方文档对于 v-on 这一常用指令提供了缩写方法,看看官网是怎么介绍的


1
2
3
4
5
<!-- 完整语法 -->
< a  v-on:click = "doSomething" ></ a >
 
<!-- 缩写 -->
< a  @ click = "doSomething" ></ a >


1、方法事件处理器

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

1
2
3
< div  id = "box" >
     < button  class = "btn btn-success"  v-on:click = "showMsg" >`msg`</ button >
</ div >


绑定一个单机事件的处理方法showMsg到methods中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var  vm =  new  Vue({
     el: '#box' //el指代选择器如 id,class,tagName
     data:{
         msg: '点击按钮'
         name: 'Vue.js'
     },
     methods:{   //在methods对象中定义方法
         showMsg:  function (e){
             //方法中的this,指代new Vue这个实例对象,可以再次验证下
             console.log( this );
             //event 是原生DOM事件
             console.log(e.target);  //打印出事件源对象button
             console.log( 'Hello'  this .name +  '!' );
         }
     }
});


查看页面效果截图

wKioL1gAR1fTKAu1AABklCPDp9g505.png


2、内联语句处理器

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

1
2
3
4
5
< div  class = "app" >
     < button  class = "btn btn-default"  v-on:click = "say('hi')" >Say Hi</ button
     <!--尝试用下v-on的缩写方法 @click-->
     < button  class = "btn btn-primary"  @ click = "say('what')" >Say What</ button >
</ div >
1
2
3
4
5
6
7
8
var  vm2 =  new  Vue({
     el: '.app' ,
     methods:{
         say:  function (msg){  //把方法里面的参数打印出来
             console.log(msg);
         }
     }
});


查看页面效果截图

wKiom1gASbyTL4PrAAA44dNplg0172.png

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

1
2
3
< div  class = "app" >
     < a  href = "http://cn.vuejs.org/guide/events.html"  @ click = "stop(test, $event)" >打开Vue官网</ a >
</ div >
1
2
3
4
5
6
7
8
9
10
11
12
var  vm2 =  new  Vue({
     el: '.app' ,
     data:{
         test: '阻止链接跳转'
     },
     methods:{
         stop:  function (test, e){
             e.preventDefault();
             alert(test);
         }
     }
});


点击a链接以后,页面还能跳转到vue官网吗?看看页面效果截图

wKiom1gAT-jhd-pDAABiTNJWbjM327.png


3、事件修饰符

在事件处理器中经常需要调用event.preventDefault()或event.stopPropagation()。尽管在方法内可以轻松做到(如上例所示),不过让方法是纯粹的数据逻辑而不处理DOM事件细节会更好。


为了解决这个问题,Vue为v-on提供了两个事件修饰符:.prevent和.stop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 阻止单击事件冒泡 -->
< a  v-on:click.stop = "doThis" ></ a >
 
<!-- 提交事件不再重载页面 -->
< form  v-on:submit.prevent = "onSubmit" ></ form >
 
<!-- 修饰符可以串联 -->
< a  v-on:click.stop.prevent = "doThat" >
 
<!-- 只有修饰符 -->
< form  v-on:submit.prevent></ form >
 
<!-- 添加事件侦听器时使用 capture 模式 -->
< div  v-on:click.capture = "doThis" >...</ div >
 
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
< div  v-on:click.self = "doThat" >...</ div >

wKioL1gAVXKQ4StyAAFT7_wfYyA262.png

看一小段代码理解下上面的大段内容:

1
2
3
4
5
6
< div  id = "container" >
 
     <!-- 阻止页面跳转 -->
     < a  v-on:click.prevent = "doThis"  href = "http://cn.vuejs.org/guide/events.html" >doThis</ a >
 
</ div >
1
2
3
4
5
6
7
8
var  vm3 =  new  Vue({
     el: '#container' ,
     methods: {
         doThis:  function  () {
 
         }
     }
});

最终的实际结果就是,点击a链接,并不会跳转到Vue官网,完全实现了我们预期的效果。


再来看一个关于.self的例子

1
2
3
4
5
< div  id = "app" >
     < div  @ click.self = "test"  class = "a" >a
         < div  class = "b" >b</ div >
     </ div >
</ div >
1
2
3
4
5
6
7
8
9
10
11
var  vm4 =  new  Vue({
     el: '#app' ,
     data:{
         items: 'test'
     },
     methods:{
         test:  function (e){
             console.log(e);
         }
     }
})


根据Vue的文档解释“只当事件在该元素本身(而不是子元素)触发时触发回调”,所以点class为a的div时触发了事件,点class为b的div时则不会

wKiom1gAWNjhO8N4AABLWlXWGoY185.png


4、按键修饰符

http://dapengtalk.blog.51cto.com/11549574/1860203

在这边博文中,我专门复习了keycode的相关知识。在Vue中也专门为键盘监听事件提供了一系列的按键修饰符

1
2
3
4
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
< input  v-on:keyup.13 = "submit" >
<!-- 同上 -->
< input  v-on:keyup.enter = "submit" >


全部的按键别名:

  • enter

  • tab

  • delete

  • esc

  • space

  • up

  • down

  • left

  • right


5、为什么在HTML中监听事件?

(1)、扫一眼HTML模板便能轻松定位在Javascript代码里对应的方法。

(2)、因为你无需在Javascript里手动绑定事件,你的ViewModel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试。

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


学习的过程中参考了以下文档,诚挚感谢

http://cn.vuejs.org/guide/events.html

http://blog.csdn.net/qq20004604/article/details/52413898


本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1861865

相关文章
|
20天前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
17 0
|
6天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
14 1
|
13天前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
8 1
|
16天前
|
JavaScript
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
17 4
|
15天前
|
JavaScript
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
24 2
|
18天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
|
21天前
|
JavaScript 前端开发
JavaScript 中的三种事件模型
JavaScript 中的事件模型主要有三种: 传统事件模型(DOM Level 0) 标准事件模型(DOM Level 2) IE 事件模型(非标准,仅限于旧版本的 Internet Explorer)
19 1
|
28天前
|
JavaScript
Vue.js中使用.self修饰符来限制事件处理程序的作用域
Vue.js中使用.self修饰符来限制事件处理程序的作用域
|
26天前
|
JavaScript 前端开发
第八篇-Javascript 事件
第八篇-Javascript 事件
22 1
|
27天前
|
JavaScript 前端开发
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
21 1