Vue-15- 事件绑定
作者：Python研究所
- 2022 年 6 月 20 日
本文字数：3250 字
阅读完需：约 11 分钟
前言
前面我们已经了解了条件渲染和列表渲染，计算属性动态绑定等。今天我们学习一个常用的概念：事件绑定，即在事件被触发时执行某些动作。
事件监听
代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <title>von</title> </head> <body> <div id="app"> <h1>v-on中直接执行代码进行计算</h1> <button v-on:click="counter += 1">点一下</button> <p>你点击了 {{counter}} 下！</p>
<h1>v-on中调用方法showinfo</h1> <button type="button" @click="showinfo">点击查看提示</button> </div> <script type="text/javascript"> // // 江城子 . 程序员之歌 // // 十年生死两茫茫，写程序，到天亮。 // 千行代码，Bug何处藏。 // 纵使上线又怎样，朝令改，夕断肠。 // // 领导每天新想法，天天改，日日忙。 // 相顾无言，惟有泪千行。 // 每晚灯火阑珊处，夜难寐，加班狂。 // app = new Vue({ el: '#app', data: { counter: 0, name: "phyger" }, methods:{ showinfo: function(event){ alert('Hello '+this.name+' !'); console.log(event); } } }) </script> </body></html>
复制代码
效果
v-on监听click事件，当发生鼠标点击事件时Vue会进行counter加 1 的动作。v-on监听click事件，当发生鼠标点击事件时调用showinfo方法。
事件参数传递 &修饰
代码:参数传递
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <title>von</title> </head> <body> <div id="app"> <h1>v-on中直接执行代码进行计算</h1> <button v-on:click="counter += 1">点一下</button> <p>你点击了 {{counter}} 下！</p>
<h1>v-on中调用方法showinfo</h1> <button type="button" @click="showinfo">点击查看提示</button>
<h1>say something</h1> <button type="button" @click="say('good')">say good</button> <button type="button" @click="say('bad')">say bad</button> </div> <script type="text/javascript"> // // 江城子 . 程序员之歌 // // 十年生死两茫茫，写程序，到天亮。 // 千行代码，Bug何处藏。 // 纵使上线又怎样，朝令改，夕断肠。 // // 领导每天新想法，天天改，日日忙。 // 相顾无言，惟有泪千行。 // 每晚灯火阑珊处，夜难寐，加班狂。 // app = new Vue({ el: '#app', data: { counter: 0, name: "phyger" }, methods:{ showinfo: function(event){ alert('Hello '+this.name+' !'); console.log(event); }, say: function(sm,event){ console.log('say '+ sm); } } }) </script> </body></html>
复制代码
效果
分别点击 say good 和 say bad 将会传递不同的参数到方法 say 中，从而实现不同的效果。
代码：修饰符
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <title>von</title> </head> <body> <div id="app"> <h1>v-on中直接执行代码进行计算</h1> <button v-on:click="counter += 1">点一下</button> <p>你点击了 {{counter}} 下！</p>
<h1>v-on中调用方法showinfo</h1> <button type="button" @click="showinfo">点击查看提示</button>
<h1>say something</h1> <button type="button" @click.once="say('good')">say good</button> <button type="button" @click="say('bad')">say bad</button> </div> <script type="text/javascript"> // // 江城子 . 程序员之歌 // // 十年生死两茫茫，写程序，到天亮。 // 千行代码，Bug何处藏。 // 纵使上线又怎样，朝令改，夕断肠。 // // 领导每天新想法，天天改，日日忙。 // 相顾无言，惟有泪千行。 // 每晚灯火阑珊处，夜难寐，加班狂。 // app = new Vue({ el: '#app', data: { counter: 0, name: "phyger" }, methods:{ showinfo: function(event){ alert('Hello '+this.name+' !'); console.log(event); }, say: function(sm,event){ console.log('say '+ sm); } } }) </script> </body></html>
复制代码
如上，我们为
say good的按钮的click事件添加了once的修饰符，意为这个事件仅会触发一次say方法。
效果
当我们第二次点击 say good 按钮时，say 方法已经不会被触发了，而 say bad 按钮则可以多次触发 say 方法。
常用的事件修饰符
stop
prevent
capture
self
once
passive
常用的按键修饰符
鼠标：
left
right
middle
键盘：
ctrl
alt
shift
meta
按键修饰符
v-on 监听键盘事件，当发生对应事件触发某些操作。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <title>von</title> </head> <body> <div id="app"> <h1>v-on中直接执行代码进行计算</h1> <button v-on:click="counter += 1">点一下</button> <p>你点击了 {{counter}} 下！</p>
<h1>v-on中调用方法showinfo</h1> <button type="button" @click="showinfo">点击查看提示</button>
<h1>say something</h1> <button type="button" @click.once="say('good')">say good</button> <button type="button" @click="say('bad')">say bad</button>
<h1>push mouse middle</h1> <button type="button" @click.middle="f1">mouse middle active alert</button> </div> <script type="text/javascript"> // // 江城子 . 程序员之歌 // // 十年生死两茫茫，写程序，到天亮。 // 千行代码，Bug何处藏。 // 纵使上线又怎样，朝令改，夕断肠。 // // 领导每天新想法，天天改，日日忙。 // 相顾无言，惟有泪千行。 // 每晚灯火阑珊处，夜难寐，加班狂。 // app = new Vue({ el: '#app', data: { counter: 0, name: "phyger" }, methods:{ showinfo: function(event){ alert('Hello '+this.name+' !'); console.log(event); }, say: function(sm,event){ console.log('say '+ sm); }, f1: function(){ alert("U clicked mouse middle!") } } }) </script> </body></html>
复制代码
效果
以上就是今天的全部内容了，感谢您的阅读，我们下节再会。
划线
评论
复制
发布于: 刚刚阅读数: 3
版权声明: 本文为 InfoQ 作者【Python研究所】的原创文章。
原文链接:【http://xie.infoq.cn/article/88d56fd11cabb6ff700c96702】。文章转载请联系作者。
Python研究所
关注
公众号:Python研究所 2018.10.14 加入
云原生领域技术分享。
评论