vue事件监听,事件修饰符和按键修饰符
vue事件监听,事件修饰符和按键修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>事件监听</h1>
<button @click="test">test</button>
<button @click="test2('ceshi')">test2</button>
<button @click="test3">test3</button>
<button @click="test4($event,1)">test4</button>
<h1>事件修饰符</h1>
<!--
@click会存在事件冒泡
@click.stop 阻止事件冒泡
-->
<div style="width: 200px;height: 200px;background: red;" @click="test5">
<div style="width: 100px;height: 100px; background: blue;" @click.stop="test6">
</div>
</div>
<!--阻止事件的默认行为-->
<a href="http://www.jiajiajia.club" target="_blank" @click.prevent="test7">去官网</a>
<h1>按键修饰符</h1>
<!--test8,test9,test10都可以监听enter键-->
<input type="text" @keyup="test8" />
<input type="text" @keyup.13="test9" />
<input type="text" @keyup.enter="test10" />
<input type="text" @keyup="test11" placeholder="获取按键的keyCode"/>
</div>
<script>
var v=new Vue({
el:'#app',
data:{
},
methods:{
test(){
alert("test")
},
test2(value){
alert("test2"+value)
},
test3(event){
alert(event.target.innerHTML)
},
test4(event,value){
alert(event.target.innerHTML+value)
},
test5(){
alert("test5");
},
test6(){
alert("test6");
},
test7(){
alert("去官网");
},
test8(event){
if(event.keyCode==13){
alert(event.target.value);
}
},
test9(event){
alert(event.target.value);
},
test10(event){
alert(event.target.value);
},
test11(event){
alert(event.keyCode);
}
}
})
</script>
</body>
</html>
fixed
没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。