Vue.js-事件处理器
Vue.js-事件处理器
tianyawhl 发表于6个月前
Vue.js-事件处理器
  • 发表于 6个月前
  • 阅读 9
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

监听事件

<body class="">
<div id="example-1">
    <div>{{counter}}</div>
    <button v-on:click="counter+=1">增加</button>
</div>
    <script src="js/vue.js"></script>
    <script>
    
    var app7 = new Vue({
        el: '#example-1',
        data: {
            counter:0
        },
       
    })
    </script>
</body>

 

方法事件处理器
许多事件处理的逻辑都很复杂,所以直接把JavaScript代码写在v-on指令中是不可行的,因此v-on可以接收一个定义的方法来调用

<body class="">
    <div id="example-1">
        <button v-on:click="greenting">欢迎</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data: { message: "good" },
        methods: {
            greenting: function(event) {
                alert("hello" + this.message + "!");
                if (event) {
                    alert(event.target.tagName);
                }
            }
        }
    })
    </script>
</body>

 

内联处理器方法
处理直接绑定到一个方法,也可以用内联JavaScript语句,调用时把不同的参数传递给方法

<body class="">
    <div id="example-1">
        <button v-on:click='say("hi")'>say hi</button>
        <button v-on:click='say("hello")'>say hello</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        methods: {
            say: function(element) {
                alert("this is "+ element)
            }
        }
    })
    </script>
</body>

 

有时候也需要在内联语句处理器中访问原生DOM事件,可以用特殊变量$event把它传入方法

<body class="">
    <div id="example-1">
        <button v-on:click="warn('warning',$event)">submit</button>
       
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        methods: {
            warn: function(message,event) {
                //现在我们可以访问原生事件
                if(event) event.preventDefault()
                alert("this is "+ message)
            }
        }
    })
    </script>
</body>

 

事件修饰符

在事件处理程序中调用event.preventDefault()或者event.stopPropagation()是非常常见的需求,尽管我们可以在methods中轻松实现,但更好的方法是:methods只有纯碎的数据逻辑,而不是去处理DOM事件细节,为了解决一个问题。Vue.js为v-on提供了事件修饰符,通过.表示的指令后缀来调用修饰符

//防止事件冒泡
<a v-on:click.stop="doThis"></a>
//提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
//修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
//只有修饰符
<form v-on:submit.prevent></from>
//添加事件侦听器时使用事件捕获模式
<div v-on:click.capture="doThis"></div>
//只有事件在该元素本身(比如不是子元素)触发时触发回调
<div v-on:click.self="doThat"></div>

//使用修饰符时,顺序很重要,响应的代码会以同样的顺序产生,因此用
@click.prevent.self会阻止所有的点击,,而@click.self.prevent只会阻止本元素上的点击

 

键值修饰符
在监听键盘事件时,我们经常需要监听常见的键值, Vue 允许为v-on在监听键盘事件时添加关键修饰符
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的keyCode比较困难,所有Vue为常用的按键提供了别名
<input v-on:keyup.enter="submit">  缩写语法<input @keyup.enter="submit">
全部的按键别名:
.enter
.tab
.delete(捕获删除和退格键)
.esc
.space
.up
.down
.left
.right
可以通过全局cinfig.keyCodes对象自定义键值修饰符别名
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 178
码字总数 73283
×
tianyawhl
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: