1. 이벤트 핸들러 기본 문법
Vue에서 이벤트 핸들러를 통해 버튼을 만들어보자.
자바스크립트에서는 보통 onclick = " " 문법을 사용한다.
그렇다면 Vue 에서는??
<button v-on:click=" "></button>
위와 같이 v-on:click 안에 ~~~ 적으면 된다.
v-on:click 문법은 @click으로 축약 가능 하다.
--> v-on의 약자가 @라고 보면 된다고 한다,, ( HTML 문법이 아닌 Vue 문법!! )
2. 진행 과정 차이
예를 들어 버튼을 눌렀을 때 수를 1 증가시키기 위한 코드를 작성하려고 할 때,
먼저 기본 자바스크립트 스타일은
- 버튼을 생성하고 누른다.
- 숫자를 찾아서 +1 해준다.
- 그런 뒤 +1 된 정보를 HTML에 반영해준다.
이런 식으로 진행되는 반면
Vue 에서는
- 버튼을 생성하고 누른다.
- 관련 데이터는 자동으로 +1 되어 새로고침된다.
이렇게 조금 더 간편해지는 것을 볼 수 있다.
이는 데이터가 변하면 해당 데이터와 관련된 HTML을 자동으로 바꿔주는 Vue의 특징으로 인한 것이다.
3. 함수 사용하기
<button v-on:click="@~@!~@~!@!~"></button>
여기에서 입력할 코드가 너무 길면 가독성이 떨어질 수 있다.
이런 경우에는 밑으로 내려가서 함수를 따로 작성한 뒤,
함수의 이름만 가져와 넣어주는 방식으로도 작성이 가능하다.
- Vue 에서 함수 작성법
methods : {
함수이름() {
this.데이터이름 += 1
}
}
script 태그 내부에 이런 식으로 작성하면 된다.
이 때 중요한 점은 데이터를 가져다 쓰기 위해서는 this를 데이터 이름 앞에 꼭 붙여줘야 한다는 것 이다.
4. 간단 예제
3개의 장소 중 가고 싶은 곳을 투표로 정하려고 할 때
<div>
<h4>{{products[0]}}</h4>
<button @click="투표[0]++">투표하기</button>
<span>투표 : {{ 투표[0] }}</span>
</div>
<div>
<h4>{{products[1]}}</h4>
<button @click="투표[1]++">투표하기</button>
<span>투표 : {{ 투표[1] }}</span>
</div>
<div>
<h4>{{products[2]}}</h4>
<button @click="투표[2]++">투표하기</button>
<span>투표 : {{ 투표[2] }}</span>
</div>
data() {
return {
투표 : [0, 0, 0],
products : ['산', '바다', '놀이공원'],
}
},
위에서는 3개의 장소와 버튼을 생성하여 투표를 위한 버튼을 각각 생성해두었으며,
하단의 코드에는 각각의 투표 수를 배열 형태로 저장해두었다.
728x90
'Vue' 카테고리의 다른 글
[Vue] Vue 모달창 만들기 (0) | 2023.03.01 |
---|---|
[Vue] error : Component name should always be multi-word 오류 해결 방법 (0) | 2023.03.01 |
[Vue] Vue의 반복문 v-for (0) | 2023.02.28 |
[Vue] Vue의 데이터바인딩 문법 (0) | 2023.02.28 |
[Vue] Vue 개발환경 세팅 (0) | 2023.02.28 |