Sam: /* 개요 */

2022-07-05T04:31:41Z

개요

← 이전 판		2022년 7월 5일 (화) 04:31 판
1번째 줄:		1번째 줄:
	{{Vue}}		{{Vue}}

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

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

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

	== 사용예 ==		==사용예==
	{\| class="wikitable"		{\| class="wikitable"
	\|+		\|+
28번째 줄:		28번째 줄:
	\|}		\|}

	=== 함수 사용 ===		===함수 사용===
	{\| class="wikitable"		{\| class="wikitable"
	!의도		!의도

Sam: 새 문서: {{Vue}} == 개요 == 어떤 요소를 클릭하면 작동하게 만드는 기능. 자바스크립트에선 주로 onclick 속성을 사용한다. Vue에선 @ 뒤에 특정 이벤...

2022-07-04T08:07:02Z

새 문서: {{Vue}} == 개요 == 어떤 요소를 클릭하면 작동하게 만드는 기능. 자바스크립트에선 주로 onclick 속성을 사용한다. Vue에선 @ 뒤에 특정 이벤...

새 문서

{{Vue}}

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

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

Vue에선 @ 뒤에 특정 이벤트를 지정하여 작동하게 한다. 자바스크립트에 비해 간단해 좋다.

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

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

Vue:이벤트 핸들러 - 편집 역사

Sam: /* 개요 */

Sam: 새 문서: {{Vue}} == 개요 == 어떤 요소를 클릭하면 작동하게 만드는 기능. 자바스크립트에선 주로 onclick 속성을 사용한다. Vue에선 @ 뒤에 특정 이벤...