Vue.js-事件处理器 原
监听事件
<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
(adsbygoogle = window.adsbygoogle || []).push({});