일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- 함수
- 컴포넌트
- react
- let
- 타입스크립트
- null
- BIND
- todolist
- typescript
- 데이터 타입
- 객체
- 모던 자바스크립트
- const
- 스코프
- function
- redux
- 모던
- Number
- 뷰
- 라우터
- CSS
- 자바스크립트
- VUE
- var
- 리액트
- 투두리스트
- js
- this
- Interface
- ES6
- Today
- Total
목록Method (2)
홍준혁

Vue에서 간단히 연산을 하는 경우 {{ message.split('').reverse('').join('') }} 이렇게 {{ }}안에 많은 로직이 있으면 보기 흉하고 유지 보수하기 힘들어진다. ※ {{}}안에 내용은 자바스크립트코드가 들어갈 수 있다 그래서 나온것이 computed인데 computed를 쓰면 {{ reversedMessage }} 이렇게 함수화시켜서 간단히 표현할 수 있다. 하지만 여기서 의문점이 들것이다. methods에다가 함수를 선언하고 하면 결과는 다르지 않을 텐데 왜 굳이 computed에 정의를 했느냐 인데 이것은 computed속성의 특징때문인데. computed는 "미리 계산된"이라는 뜻이다. 처음에 한번 계산하고 또 한번 쓸 때 전에 계산된 값을 한번 더 사용하게 된다..

이번에 배워볼 것은 이벤트를 배워 볼 것이다. 이벤트라는 것은 어떠한 동작이 수행되었을 때 그 동작 자체를 이벤트라고 생각하면 될 것이다. 즉 이벤트가 감지되었을 때 특정 동작을 수행해라.라고 이해하면 될 것이다. ADD SUB 현제 count의 값은 {{ count }} 간단한 이벤트를 사용한 예제이다. v-on:이라는 것을 사용했는데 기존에 HTML에서 onclick을 사용하면 JS코드가 실행이 되는 방식이었는데 Vue는 v-on:click이라는 문법을 사용해서 Vue에서 바인딩을 하는 방식을 사용한다. 그래서 ADD 위 코드를 보면 이 버튼에서 클릭이 감지되었을 시에 count += 1을 실행한다는 것이다. 이때 count의 값은 Vue에 선언되어있는 data에 count값을 의미한다. 하지만 위에..