vue事件处理可用v-on指令监听DOM事件来触发JavaScript代码,方法事件处理器接受一个定义的方法来调用.事件修饰符可以阻止默认事件,事件冒泡等,按键修饰符监听键盘事件中的键值,修饰键开启鼠标或键盘事件监听,在按键按下时触发
❤️❤️❤️
vue事件处理器?方法事件处理器?内联事件处理器?时间修饰符?案件修饰符?修饰键?综合案例?
1.vue事件处理器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>演示监听事件</title>
<script src="js/vue.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
<button v-on:click="count =count+'乐美课堂'">添加乐美课堂</button>
<p>{{count}}</p>
</div>
<!--监听事件直接把事件写在v-on指令中，单击添加按钮时，会在p标签里追加
乐美课堂。
-->
<script>
var example1 = new Vue({
el:"#app",
data:{count:'乐美课堂'}
})
</script>
</body>
</html>
效果图
点击添加乐美课堂后
由于实际开发过程利用事件处理的逻辑往往都很复杂，所以直接把JavaScript代码写在v-on指令中显然是不可行的。因此，可以使v-on接受一个定义的方法来调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>演示方法事件处理器</title>
<script src="js/vue.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
<button v-on:click="greet">greet</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{name:'vue.js'},
methods:{greet:function(){
alert(this.name+'的方法被调用了！')
}}
})
</script>
</body>
</html>
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>演示内联事件处理器</title>
<script src="js/vue.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
<button v-on:click="me_say('你好哇，我在这里')">本人</button>
<button v-on:click="you_say('你好呀，我也是哇')">对方</button>
<br>本人说：{{me}}
<br>对方说：{{you}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{me:'',you:''},
methods:{me_say:function(message){
app.me=message
},you_say:function(message){app.you=message}}
})
</script>
</body>
</html>
效果图：
分别点击本人，对方按钮后
在内联语句处理器可以用特殊的变量$event把它传入方法，以此来访问原生的DOM事件
2.修饰符
事件处理函数只是纯粹的数据逻辑，不处理事件细节，如阻止冒泡，默认行为，判断按键等。一般在执行事件处理时调用event.preventDefault()来阻止事件默认行为。事件修饰符由.（点）表示的指令后缀来调用修饰符。修饰符增加事件处理中一些细节功能，
<!--阻止单击事件冒泡-->
<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:click:submit.prevent></form>
<!--添加事件监听器时使用事件捕获模式-->
<div v-on:click.capture="doThis">...</div>
<!--只有当事件在该元素本身触发时触发回调-->
<div v-on:click.self="doThat">...</div>
按键修饰符：
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
<input v-on:keyup.enter="submit">
<!--缩写语法-->
<input @keyup.enter="submit">
修饰键：
.ctrl
.alt
.shift
.meta
3.综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>事件处理综合案例</title>
<script src="js/vue.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="container">
<p>{{msg}}</p>
<button v-on:click="handleClick">单击按钮</button>
<button @click="handleClick">单击按钮</button>
<h5>选择爱好</h5>
<select v-on:change="handleChange">
<option value="red">瑜伽</option>
<option value="green">跑步</option>
<option value="pink">读书</option>
</select>
<h5>表单提交</h5>
<form v-on:submit.prevent="handleSubmit">
<input type="checkbox" v-on:click="handleDisabled"/>
是否同意本站协议
<br><br>
<button :disabled="isDisabled">提交</button>
</form>
</div>
<script>
new Vue({
el:"#container",
data:{
msg:'注册账户',
isDisabled:true
},
methods:{
handleClick:function(){
console.log("btn is clicked");
},
handleChange:function(event){
console.log("选择了某选项"+event.target.value);
},
handleSubmit:function(){
console.log("触发事件");
},
handleDisabled:function(event){
console.log(event.target.checked);
if(event.target.checked==true){this.isDisabled= false;}
else{this.isDisabled= true;}
}
}
})
</script>
</body>
</html>
效果图
3737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
