vue click.native.stop（VUE·13：事件处理之 @click用法）
总览
1.传参的事件绑定
2.不传参的事件绑定一 、不传参的事件处理
1.原理1.1 我们在vue模板实例中 ，给标签设定一个属性：v-on:click=“xxx ”（可以简写为 @click=“xxx ”） ，然后赋一个函数名 A 。
1.2 意思就是 ，如果我们点击这个标签 ，那么就会执行这个函数 A 中的内容
1.3 请注意 ，我们给vue模板实例对应的事件函数也要写在 实例对象vm的method:{}中 ，请看代码就懂了
2.代码示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- <button v-on:click="showInfo">点我提示信息</button> --> <button @click="showInfo1">点我提示信息1（不传参）</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示 。 const vm = new Vue({ el:#root, data:{ name:尚硅谷, }, methods:{ showInfo1(event){ // console.log(event.target.innerText) // console.log(this) //此处的this是vm alert(同学你好！) }, } }) </script> </html>二 、传参的事件处理
1.原理传参的内容中 ，我们只需要比不传参的多加一个（
e
v
e
n
t
,
参
数
）
，
这
个
event,参数） ，这个
event,参数） ，这个event只是用来连接vue实例的 2.代码示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- <button v-on:click="showInfo">点我提示信息</button> --> <button @click="showInfo2($event,66)">点我提示信息2（传参）</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示 。 const vm = new Vue({ el:#root, data:{ name:尚硅谷, }, methods:{ showInfo2(event,number){ console.log(event,number) // console.log(event.target.innerText)能够显示event中传递过来的标签包住的内容 ，比如说“点我提示信息2（传参） ” alert(同学你好！！) } } }) </script> </html>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！