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라는 옵션을 추가하면 해당 컴포넌트에서만 적용되는 스타일을 의미..

instance 모든 Vue 어플리케이션은 createApp 함수를 사용해서 intance를 만드는 것부터 시작이다. import { createApp } from 'vue' const app = createApp({ /* root component options */ }) root component instance를 생성하기 위해 사용하는 createApp 함수에는 실제 컴포넌트를 넘겨야하고 모든 어플리케이션은 자식으로 다른 컴포넌트를 가질 수 있는 "root component"가 존재해야 한다! 아래처럼 root component로 사용할 컴포넌트를 임포트해서 createApp 함수에 넣어주면 된다! import { createApp } from 'vue' // root component import..

Vue-CLI Vue-CLI는 기본 CRA와 마찬가지로 webpack과 babel 같이 복잡한 설정을 별도로 하지 않고도 Vue 개발 환경을 설정해주는 아주 편리한 도구이다. 우선, npm 혹은 yarn이 설정되어 있어야 하고 node도 설치되어 있어야 한다. npm과 node가 세팅되어 있다면 아래 명령어를 이용해 vue를 설치하면 된다. # npm npm install -g @vue/cli # yarn yarn global add @vue/cli Vue-CLI로 첫 프로젝트 만들어보기! 아래 명령어를 통해 간단히 Vue 프로젝트를 생성할 수 있다. vue create [프로젝트명] 위 명령어를 통해 vue 프로젝트를 생성하려고 하면 아래처럼 Default 옵션을 선택할 지, 아니면 여러 기능을 직접 ..