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..

Component 구성요소 Vue의 컴포넌트는 .vue 라는 확장자를 가진 파일로 구성되어 있고 template, script, style 부분으로 나뉘어져 있다. hello Vue! template 부분에는 실제 HTML을 작성하고 script 부분에는 컴포넌트 관련 로직들과 함수 및 state와 props 등에 관련한 내용을 작성하고 style 부분은 css를 작성한다. template 부분은 필수로 작성되어야 하며 script와 style 부분은 필요하지 않을 경우에는 삭제해도 된다. 그리고 template, script, style 부분은 아래처럼 외부 파일을 불러서 쓸 수도 있다. scoped style style 태그에 scoped라는 옵션을 추가하면 해당 컴포넌트에서만 적용되는 스타일을 의미..