Vue.js 事件处理器
2021-04-12 22:25
标签：targe top alert 删除 span var eth back type 事件监听可以使用 v-on 指令 v-on 可以接收一个定义的方法来调用 在 `methods` 对象中定义方法 除了直接绑定到一个方法，也可以用内联 JavaScript 语句 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名 全部的按键别名： Vue.js 事件处理器 标签：targe top alert 删除 span var eth back type 原文地址：https://www.cnblogs.com/chenyingying0/p/12395212.htmlDOCTYPE html>
html>
head>
meta charset="utf-8">
title>demotitle>
head>
style>
.base{color:#fff}
.pink{background:pink}
style>
body>
script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
div id="demo">
div v-on:click="count++">点击我吧div>
div>{{count}}div>
div>
script>
var vm=new Vue({
el: ‘#demo‘,
data: {
count: 0
}
})
script>
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>demotitle>
head>
style>
.base{color:#fff}
.pink{background:pink}
style>
body>
script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
div id="demo">
div v-on:click="myfn">点击我吧div>
div>
script>
new Vue({
el:‘#demo‘,
data: {
name:"cyy"
},
methods:{
myfn:function(e){
alert("hello "+this.name);//hello cyy
//原生Dom事件
if(e){
console.log(e);
alert(e.target.tagName);//div
}
}
}
});
app.myfn();//用js直接调用方法
script>
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>demotitle>
head>
style>
.base{color:#fff}
.pink{background:pink}
style>
body>
script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
div id="demo">
div v-on:click="say(‘cyy‘)">点击我吧div>
div v-on:click="say(‘cyy2‘)">点击我也行div>
div>
script>
new Vue({
el:‘#demo‘,
data: {
},
methods:{
say:function(content){
alert(content);//hello cyy
}
}
});
app.myfn();//用js直接调用方法
script>
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>form>
div v-on:click.capture="doThis">...div>
div v-on:click.self="doThat">...div>
a v-on:click.once="doThis">a>
input v-on:keyup.13="submit">
input v-on:keyup.enter="submit">
input @keyup.enter="submit">
.enter.tab.delete (捕获 "删除" 和 "退格" 键).esc.space.up.down.left.right.ctrl.alt.shift.metap>
input @keyup.alt.67="clear">
div @click.ctrl="doSomething">Do somethingdiv>
上一篇：排序算法——选择排序
下一篇：Vue.js 表单