vue绑定click事件,vue点击事件传递参数
这篇文章主要介绍了某视频剪辑软件实现点击同时传入事件对象和自定义参数，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
仅仅传入自定义参数
超文本标记语言
div id=应用程序
按钮@click=tm(123)ddddd/button
/div
射流研究…代码
新Vue({
埃尔： #app ，
方法：{
tm:函数(e){
控制台。日志(e)；
}
}
})
仅仅传入事件对象
超文本标记语言
div id=应用程序
button @ click= TM dddd/button
/div
射流研究…代码
新Vue({
埃尔： #app ，
方法：{
tm:函数(e){
控制台。日志(e)；
}
}
})
同时传入事件对象和自定义参数
超文本标记语言
div id=应用程序
button @click=tm($event，123)ddddd/button
/div
射流研究…代码
新Vue({
埃尔： #app ，
方法：{
tm:函数(e，值){
控制台。日志(e)；
console.log(值);
}
}
})
补充：vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为
其实绑定事件后面跟的不止是点击事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown.
以下click为例
注意：所有的绑定事件都可以简写为@,比如说v型点击可以简写为@点击
1.监听事件
可以用绑定事件指令监听数字正射影像图事件，并在触发时运行一些Java脚本语言代码。通常来讲就是监听数字正射影像图触发一些操作，这些操作（比如点击)触发后执行的动作(js)可有直接写在后面
v-on:click=item=1
例如：
模板
差异
输入类型= button value= click me v-on:click= item=1 /
div{{item}}/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
项目：1
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
结果：
可以看见每点击一次绑定的值就增加1.也就是说可以吧射流研究…的操作放在事件触发的后面。但是有时候逻辑太复杂的时候写在里面就会造成混乱，视图和逻辑混淆。所以点击后面可以接一个方法，把所有处理逻辑的方法封装在一个函数里面点击的时候调用
2.事件处理方法
点击=问候
例如：
模板
差异
input type= button value= click me v-on:click= greet /
div{{res}}/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
名称：1,
资源：""
}
},
方法：{
greet: function () {
//`这个在方法里指向当前某视频剪辑软件实例
this.res=Hello this.name ！；
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
效果：
可以看见点击之后执行了迎接方法里面射流研究…逻辑
3.带参数的时间绑定方法：
同上，唯一区别是携带了参数
点击=问候（名字)
模板
差异
input type= button value= click me v-on:click= greet(name)/
div{{res}}/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
名称：1,
资源：""
}
},
方法：{
问候：功能（接收){
//`这个在方法里指向当前某视频剪辑软件实例
this.res= Hello reccept 1 ！；
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
效果一致。对方法的调用同样可以一个方法多处多次的调用
4.内联处理器中的方法
也就是说在方法里面调用其他的方法，这里的其他方法可以是射流研究…原生的方法比如阻止冒泡呀等等，也可以是自定义的方法
click=greet(name，event)
例如：
模板
差异
input type= button value= click me v-on:click= greet(name，$event)/
div{{res}}/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
名称：1,
资源：""
}
},
方法：{
问候：函数(接收，事件){
if (reccept===1) this.say()
},
跟大家讲：函数(){
this.res=我调用了
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
效果：
5.事件对象
$事件拿到当前点击事件的事件对象，比如点击就是拿到当前点击的数字正射影像图事件对象信息
v-on:click=greet($event)
例如：
模板
差异
input type= button value= click me v-on:click= greet($ event)/
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
隐藏：真
}
},
方法：{
问候：功能(电动汽车){
警报(ev.clientX)
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
效果：
6.事件冒泡
当不阻止事件冒泡的时候会弹两次
邪恶的笑(邪恶的露齿一笑的缩写)
模板
差异
div @click=show1($event)
div @click=show2($event)点击我呀/div
/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
隐藏：真
}
},
方法：{
展示1:功能（电动汽车){
警报(1)
},
显示2:函数(ev1) {
警报(2)
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
那么但阻止冒泡后就只会弹一次
例如：原生射流研究…阻止冒泡
ev1.cancelBubble=true
模板
差异
div @click=show1($event)
div @click=show2($event)点击我呀/div
/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
隐藏：真
}
},
方法：{
展示1:功能（电动汽车){
警报(1)
},
显示2:函数(ev1) {
ev1.cancelBubble=true
警报(2)
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
那么某视频剪辑软件自己封装的阻止冒泡方法呢？
@click.stop=show2()
例如：
模板
差异
div @click=show1()
div @click.stop=show2()点击我呀/div
/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
隐藏：真
}
},
方法：{
show1: function () {
警报(1)
},
显示2:函数(ev1) {
警报(2)
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
7.阻止默认行为：
比如：如下右键之后会将默认的菜单带出来
模板
差异
差异
div @contextmenu=show2()右键点击我呀/div
/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
隐藏：真
}
},
方法：{
显示2:函数(ev1) {
警报(2)
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
效果：
那么就有了阻止默认行为
ev1。防止默认()；
例如：
模板
差异
差异
div @contextmenu=show2($event)右键点击我呀/div
/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
隐藏：真
}
},
方法：{
显示2:函数(ev1) {
警戒(2);
ev1。防止默认()；
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
点击后默认菜单将不会显示(PS早360浏览器右键无效)
某视频剪辑软件里面的封装的阻止默认行为的方法：
@contextmenu.prevent=show2()
例如：
模板
差异
差异
div @contextmenu.prevent=show2()右键点击我呀/div
/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
隐藏：真
}
},
方法：{
显示2:函数(ev1) {
警戒(2);
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
8.其他事件修饰符
用法都一样就不再赘述。捕获。自己。一次
！-阻止单击事件继续传播-
a v-on:click.stop=doThis/a
！-提交事件不再重载页面-
表单v-on:提交。防止=提交时/表单
！-修饰符可以串联-
一个v-on:点击。停下来。防止=做那件事/a
！-只有修饰符-
表单v-on:提交.防止/形成
！-添加事件监听器时使用事件捕获模式-
！-即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理-
div v-on:click.capture=doThis ./div
！-只当在事件。目标是当前元素自身时触发处理函数-
！-即事件不是从内部元素触发的-
div v-on:click.self=doThat ./div
使用修饰语时，顺序很重要；相应的代码将以相同的顺序生成。因此，使用@click.prevent.self将阻止所有点击，而@click.self.prevent将只阻止对元素本身的点击。
新的
！-点击事件只会被触发一次-
a v-on:click.once=doThis/a
与其他只能处理本机DOM事件的修饰符不同。once修饰符也可以用于自定义组件事件。如果你没有读过关于组件的文档，现在不用担心。
！-滚动事件不会取消默认滚动行为-
div v-on:scroll . passive= on scroll ./div
Vue提供额外的。被动修改器，用于这些修改器来提高移动终端的性能。
例如，当滚动时，浏览器将在整个事件被处理后触发滚动，因为浏览器不知道该事件是否在其处理函数event.preventDefault()中被调用。的。passive修饰符用于进一步告诉浏览器该事件的默认行为不会被取消。
不要用。被动的。预防。被动处理程序不能阻止默认事件行为。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。如有错误或不足之处，请不吝赐教。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。