Vue.js学习笔记：v-no绑定事件

╰半橙微兮° 2021-09-14 01:44 338阅读 0赞

v-on 指令用于监听DOM事件 形式如：v-on:click  缩写为 @click

<a v-on:click="doSomething"></a>  
  
  
<a @click="doSomething"></a>

（一）.监听DOM事件

以用 `v-on` 指令监听 DOM 事件来触发一些 JavaScript 代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on的使用</title> </head> <body> <div id="example-1"> <button @click="counter += 1">增加 1</button> <p>这个按钮被点击了 { { counter }} 次。</p> </div> <script src="js/vue.js"></script> <script> var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) </script> </body> </html>

![20170731142131075][]

(二).方法处理器

直接把 JavaScript 代码写在 `v-on` 指令中是不可行的。因此 `v-on` 可以接收一个定义的方法来调用。,绑定一个单机事件的处理方法showMsg到methods中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on的使用</title> </head> <body> <div id="box"> <button class="btn btn-success" v-on:click="showMsg">{ {msg}}</button> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el:'#box', //el指代选择器如 id，class，tagName data:{ msg:'点击按钮', //这里仅仅是为了生硬的强化记忆vue双括号标签写法 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 + ' !'); } } }); </script> </body> </html>

![20170731141219990][]

（三）.内联处理器方法

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on的使用</title> </head> <body> <div id="example-1"> <button class="btn btn-default" v-on:click="say('hello ,欢迎你学习vue.js')"> hello ,欢迎你学习vue.js</button> </div> <script src="js/vue.js"></script> <script> var example1 = new Vue({ el: '#example-1', methods: { say: function (message) { console.log(message) } } }) </script> </body> </html>

![20170731144638342][]

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on的使用</title> </head> <body> <div id="example-1"> <a href="http://cn.vuejs.org/guide/events.html" @click="stop(test, $event)">打开Vue官网</a> </div> <script src="js/vue.js"></script> <script> var example1 = new Vue({ el: '#example-1', data:{ test:'阻止链接跳转' }, methods:{ stop: function(test, e){ e.preventDefault(); alert(test); } } }) </script> </body> </html>

点击a链接以后，页面还能跳转到vue官网吗？

![20170731150607090][]

(四).事件修饰符

在事件处理器中经常需要调用event.preventDefault()或event.stopPropagation()。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

<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>  
  
  
  
<div v-on:click.capture="doThis">...</div>  
  
  
  
<div v-on:click.self="doThat">...</div>

（五）.键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 `v-on` 在监听键盘事件时添加关键修饰符：

在此之前先了解[keycode的相关知识][keycode]

<input v-on:keyup.13="submit">    最体可以看官网：[https://cn.vuejs.org/v2/guide/events.html\#事件修饰符][https_cn.vuejs.org_v2_guide_events.html]

（六）为什么在HTML中监听事件？

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

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

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

[20170731142131075]: /images/20210813/c036985ca7214c0988062d002c39bd2f.png
[20170731141219990]: /images/20210813/76e8a50522fb4b2cae363278e7507c86.png
[20170731144638342]: /images/20210813/f4877a2c10854e7db572163ee715725c.png
[20170731150607090]: /images/20210813/54f68db54f2248cbb2b91cdc28f9b906.png
[keycode]: http://dapengtalk.blog.51cto.com/11549574/1860203
[https_cn.vuejs.org_v2_guide_events.html]: https://cn.vuejs.org/v2/guide/events.html#事件修饰符