v-on 디렉티브
v-on 디렉티브는 @로도 사용 가능하다.
// /views/EventClick
<template>
<div>
<button type="button" @click="increaseCounter">Add 1</button>
<p>The counter is : {{counter}} </p>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0
};
},
methods: {
increaseCounter(){
this.counter = this.counter + 1;
}
}
}
</script>
파라미터를 사용하는 함수 호출
<template>
<div>
<button type="button" @click="setCount(7)">set Num</button>
<p>The counter is : {{counter}} </p>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0
};
},
methods: {
setCount(counter){
this.counter = counter;
}
}
}
</script>
@click에 함수 여러개를 바인딩할 때
<template>
<div>
<button type="button" @click="increaseCounter(), alertFunc()">Add 1</button>
<p>The counter is : {{counter}} </p>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0
};
},
methods: {
increaseCounter(){
this.counter = this.counter + 1;
},
alertFunc() {
alert('아라라')
}
}
}
</script>