728x90
<template>
<div>
<h1>{{ mesg }}</h1>
<button @click="x">x()</button>
<button @click.once="x">x().once</button><br> <!-- 한번만 작동 -->
<hr>
<a href="http://www.google.com" @click.prevent="y2" target="_blank">구글 prevent y2 target="_blank"</a>
<hr>
<div style="background-color: yellow" @click="aaa">
aaa
<div style="background-color: rebeccapurple;" @click="bbb">bbb</div> <!-- bbb와 aaa가 모두 출력(전파) -->
<div style="background-color: blue;" @click.stop="ccc">ccc</div> <!-- ccc만 출력(전파 방지) -->
<div style="background-color: green;" @click="ddd">ddd</div> <!-- ddd만 출력(전파 방지) -->
</div>
<hr>
<input type="text" @keyup="xyz">keyup<br>
<input type="text" v-on:keyup.enter="xyz">keyup.enter<br>
<hr>
<input type="text" @keyup.ctrl.enter="xyz">keyup.ctrl.enter<br>
<input type="text" @keyup.ctrl.up="xyz">keyup.ctrl.up<br>
<!--
.once
.prevent
.stop
.enter
.ctrl
.up
-->
</div>
</template>
<script>
export default {
props:{
mesg:String,
},
methods:{
y:function(){
console.log("yyyyyyyyy")
},
y2:function(){
console.log("y2y2y2y2y2")
},
aaa:function(){
console.log("aaaaaaaaaa")
},
bbb:function(){
console.log("bbbbbbbbbb")
},
ccc:function(){
console.log("ccccccccccc")
},
ddd:function(e){
console.log("dddddddddd")
e.stopPropagation();
},
x:function(e){
console.log("xxxxxxxxxx")
},
xyz:function(e){
console.log("xyzxyzxyzxyz")
},
},
}
</script>
<style>
</style>
'단순 코드 기록 > Vue' 카테고리의 다른 글
| Vue_다이나믹 함수 (0) | 2024.03.08 |
|---|---|
| Vue_eventPreventDefault (0) | 2024.03.08 |
| Vue_Calculator응용 (0) | 2024.03.08 |
| Vue_Watch(자동 호출 함수) (0) | 2024.03.07 |
| Vue_Map/for(Sum)/watch (0) | 2024.03.07 |