v-for Vue.js에서 특정 엘리먼트를 여러번 반복해서 렌더링하기 위해 v-for를 사용할 수 있다. React와 굉장히 유사한 점이 있는데 역시 Vue.js도 Virtual Dom을 사용하기 때문에 성능을 위해 array의 변화를 감지해서 바뀐 부분만 렌더링하기 위하여 key라는 특별한 프로퍼티를 사용한다. 꼭 써! 사용법 v-for 문법으로 array의 요소에 대해 반복문을 실행할 수 있고 {{ item.name }} 아래와 같이 파이썬 문법과 비슷하게 요소와 인덱스를 같이 반복문에서 실행할 수 있다. 두 경우 모두 v-bind를 이용해 key에 고유한 값을 넣어줘야 한다!! {{ item }}{{ idx }} 아래 예시를 통해 좀 더 자세히 살펴보자. people이라는 object가 요소인 ar..

v-if/v-else/v-else-if v-if/v-else/v-else-if는 조건에 따라 블록을 렌더링할 때 사용한다. v-else는 반드시 v-if나 v-else-if 뒤에 와야하고 v-else-if도 마찬지이다!! 아래 예시를 보면, name이 Lee로 시작하면 Lee를 렌더링하고 그렇지 않으면 Duck을 렌더링한다. Lee Duck 사실 위 v-if/v-else 구문은 아래처럼 삼항연산자를 사용해서 표현할 수도 있다. {{ name.startsWith("Lee") ? "Lee" : "Duck" }} v-show 일단, v-if와 v-show는 같은 결과를 나타낸다. 우선, v-show는 v-if와 v-else-if 구문을 사용할 수 없다. 더 큰 차이는 v-if는 조건이 성립하지 않는다면 태그 ..

Computed template 부분에 너무 복잡한 연산을 이용하면 코드가 지저분해지고 유지보수가 어려워진다. Computed를 이용하면 복잡한 연산 과정을 따로 빼내어 편하게 템플릿에 적용할 수 있다. 기존에 아래와 같이 템플릿에서 JS문법을 이용해 연산 결과를 직접 입력했다면 {{ arr.reduce((acc, cur) => (acc += cur), 0) }} 아래와 같이 연산 로직을 따로 computed로 빼서 사용할 수 있다. method와 마찬가지로 this를 이용해 data에 접근할 수 있다! {{ sumArray }} ++주의사항 template 안에 computed 값을 쓸 때, 함수처럼 생겼다 해서 sumArray() 이런식으로 쓰면 안됨! ()를 빼고 써라 또한, HTTP 통신 로직을 ..

v-on / @ v-on 속성은 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용한다. v-on을 이용해 이벤트 리스너의 역할을 하거나 short hand인 @를 이용해 이벤트 리스너의 역할을 할 수 있다. ALERT ONE! 아래처럼 사용하면 click 이벤트를 사용하겠다는 의미이다! ALERT ONE! v-on 대신 간편하게 @를 붙여서 이벤트 리스너의 역할을 하게할 수도 있다! ALERT ONE! click으로 state 변화시키기 (@click) 위에서 본 v-on과 method를 이용해 state를 변경시킬 수 있다. 아래 예제에서 버튼을 클릭하면 number라는 state 값이 1이 증가하고 즉시 화면에 반영된다! number is: {{ number }} number = n..