만약 VueJS를 사용하여 마우스 오버 이벤트(MouseOver)를 구현하려면 어떻게하는지 아래에서 자세히 알아봅니다.
"마우스 오버는 마우스가 특정 요소의 위에 있을때 발생하는 이벤트입니다."
아래는 VueJS에서 mouseover 이벤트의 구현방법으로 모두 동일하게 함수 doMouseOver를 호출합니다.
@ mouseover.vue
위에서 사용된 button은 각각 v-on과 @mouseover를 사용하였습니다. 각각 알아보면...
v-on은 특정 요소의 props로 사용하면서 이벤트를 사용하는 기본적인 방법입니다. v-on을 사용하면 mouseover외에도 여러 이벰트를 동작시킬 수 있습니다.
다음으로 아래 예제에서 사용된 @기호를 사용한 후자의 예제는 shorthand로 줄여서 사용되는 축약 이벤트입니다.
# 마치면서여기까지VueJS에서 마우스 오버 이벤트를 구현하는 방법을 알아보았습니다. mouseover 외에도 비슷한 mouseenter가 존재하는데 비슷하지만 조금 다릅니다. mouseenter의 경우 요소에 진입할때 한 번만 이벤트를 호출하는 것이 차이점이며 mouseover는 계속해서 발생시킵니다.
"마우스 오버는 마우스가 특정 요소의 위에 있을때 발생하는 이벤트입니다."
아래는 VueJS에서 mouseover 이벤트의 구현방법으로 모두 동일하게 함수 doMouseOver를 호출합니다.
@ mouseover.vue
<button v-on="mouseover: doMouseOver">Click Me</button>
methods: {
doMouseOver: function() {
// ...
};
}
<button @mouseover="doMouseOver">Click Me</button>
doMouseOver: function() {
// ...
};
}
위에서 사용된 button은 각각 v-on과 @mouseover를 사용하였습니다. 각각 알아보면...
v-on은 특정 요소의 props로 사용하면서 이벤트를 사용하는 기본적인 방법입니다. v-on을 사용하면 mouseover외에도 여러 이벰트를 동작시킬 수 있습니다.
다음으로 아래 예제에서 사용된 @기호를 사용한 후자의 예제는 shorthand로 줄여서 사용되는 축약 이벤트입니다.
# 마치면서여기까지VueJS에서 마우스 오버 이벤트를 구현하는 방법을 알아보았습니다. mouseover 외에도 비슷한 mouseenter가 존재하는데 비슷하지만 조금 다릅니다. mouseenter의 경우 요소에 진입할때 한 번만 이벤트를 호출하는 것이 차이점이며 mouseover는 계속해서 발생시킵니다.
Author ByEnSSo