Vue:이벤트 핸들러: 두 판 사이의 차이

2022년 7월 5일 (화) 13:31 기준 최신판

어떤 요소를 클릭하면 작동하게 만드는 기능.

자바스크립트에선 주로 onclick 속성을 사용한다.

Vue에선 v-on: 뒤에 특정 이벤트를 지정하는데, 이를 축약하여 @ 뒤에 특정 이벤트를 지정하여 작동하게 하기도 한다. 자바스크립트에 비해 간단해 좋다.


의도	코드	설명
클릭	<a @click="변화 += 1">버튼 {{ 변화 }}</a>	클릭하면 '변화'값을 1 늘린다. ++문법 등 자주 쓰는 것들을 사용할 수 있다.
마우스오버	<a @mouseover="변화 += 1">버튼 {{ 변화 }}</a>	마우스를 올리면 작동한다.

의도	코드	설명
코드를 정리하기 위해 함수 사용	<a @click="함수이름">버튼 {{ 변화 }}</a>	함수는 인스턴스 안에 정의해두어야 한다.

@@ 1번째 줄: / 1번째 줄: @@
 {{Vue}}
-== 개요 ==
+==개요==
 어떤 요소를 클릭하면 작동하게 만드는 기능.
 자바스크립트에선 주로 onclick 속성을 사용한다.
-Vue에선 @ 뒤에 특정 이벤트를 지정하여 작동하게 한다. 자바스크립트에 비해 간단해 좋다.
+Vue에선 v-on: 뒤에 특정 이벤트를 지정하는데, 이를 축약하여 @ 뒤에 특정 이벤트를 지정하여 작동하게 하기도 한다. 자바스크립트에 비해 간단해 좋다.
-== 사용예 ==
+==사용예==
 {| class="wikitable"
 |+
@@ 28번째 줄: / 28번째 줄: @@
 |}
-=== 함수 사용 ===
+===함수 사용===
 {| class="wikitable"
 !의도