일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- redux
- 타입스크립트
- ES6
- 자바스크립트
- 데이터 타입
- todolist
- 라우터
- 컴포넌트
- const
- let
- Number
- 리액트
- 모던
- CSS
- function
- VUE
- 뷰
- typescript
- null
- BIND
- js
- 투두리스트
- this
- 객체
- 스코프
- Interface
- var
- 함수
- react
- 모던 자바스크립트
- 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값을 의미한다. 하지만 위에..