Vue란 ?

UI 개발을 위한 JavaScript 프레임워크이다.

HTML, CSS, JavaScript를 기반으로 이루어져있고,

이것들을 기반으로 웹 애플리케이션을 보다 쉽고, 효율적으로 개발하는데 도움을 준다.

 

 

JavaScript와 Vue의 차이

선언적 렌더링(Declarative Rendering)

Vue는 템플릿 구문( {{ 데이터 }} )을 활용하여 데이터를 선언적으로 출력(렌더링) 할 수 있도록 한다.

 

반응성(Reactivity)

Vue는 JavaScript 상태 변경을 자동으로 추적하고 변경이 발생하면 DOM을 효율적으로 업데이트한다.

 

 

React와 Vue의 공통점/차이점

공통점

가상 DOM을 사용한다.

반응적이고 조합 가능한 컴포넌트를 제공한다.

라우팅 및 전역상태를 관리하는 라이브러리가 있다.

 

차이점

React는 단방향 데이터 바인딩을 이용하고, Vue는 양방향 데이터 바인딩 방식을 이용한다.

리액트는 JSX(JavaScript XML) 형태로 코드를 작성하고, JavaScript만을 사용하여 UI 로직과 DOM을 구현한다.

Vue의 가상 DOM 구현이 React보다 빠르며 오버 헤드가 적게 발생한다.

React에서 모든 컴포넌트는 JSX를 사용해 JSX의 툴을 이용해 Vue의 템플릿보다 더 나은 기능을 사용할 수 있다.

Vue는 템플릿을 사용하여 쉽고 빠르게 제작이 가능하며 진입장벽이 낮다.

 

 

---

Vue의 핵심 기능

바인딩(v-bind)

element 속성에 데이터를 바인딩(=연결)한다.

위 코드에서와 같이 v-bind 속성은 데이터(상태) 속성에 바인딩할 때 사용하는 특수 속성이다.

바인딩 된 DOM은 placeholder 속성을 Vue 인스턴스의 message 속성으로 최신 상태를 유지한다.

** v- 접두어가 붙은 특수 속성을 디렉티브(directive)라고 한다.

 

⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️

placeholder 속성이 message 속성의 상태로 바인딩되어 유지되어 실행되는 것을 볼 수 있다.

만약 message의 값을 변경하게 되면 placeholder가 변경된 message의 값으로 바뀌게 된다.

 

 

이벤트 핸들링(v-on)

사용자가 앱과 상호 작용할 수 있게 하기 위해 v-on 디렉티브를 사용하여 Vue 인스턴스의 메서드를 호출하는 이벤트 리스너를 추가할 수 있다.

 

⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️

click 버튼을 눌렀을 때 Hello 메시지의 alert가 실행되는 것을 볼 수 있다.

 

 

양방향 바인딩(v-model)

Vue는 input, select 등의 입력과 앱의 상태(data)를 양방향으로 바인딩하는 v-model  디렉티브를 제공한다.

 

⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️

data()의 name이 v-bind:value에 제대로 바인딩 되있는 것을 볼 수 있는데,

이 때, 만약 <input />의 값을 수정하게 된다면 {{ value }}의 값은 어떻게 될까 ?

 

<input />의 값을 hoony123456789로 수정하였지만, {{ value }}의 값(상태)은 hoony로 변하지 않은 것을 볼 수 있다.

이것과 같이 한쪽 방향으로만 바인딩 되어있는 것을 단방향 바인딩이라 하고,

양방향으로 바인딩할 때 사용하는 것이 v-model이다.

 

 

 

⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️

여기서 <input />의 값을 변경하게 되면,

 

{{ value }}의 값(상태)도 같이 변경이 되는 것을 볼 수 있다.

 

 

조건문

엘리먼트 표시여부는 v-if 특수 속성(디렉티브)으로 제어할 수 있다.

 

⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️

여기서 click 버튼을 누르게 되면,

Hello !가 나타나게 된다.

처음 visible의 값은 false였고, v-if 속성 때문에 Hello !가 보이지 않았지만,

버튼을 누른 후, visible의 값이 true로 바뀌게 되면서 Hello !가 보이게 되었다.

 

 

반복문

v-for를 사용하여 배열에서 데이터를 가져와 아이템 목록을 표시할 수 있다.

 

v-for를 사용하여 반복문을 사용한 뒤, 템플릿 구문({{ }})을 사용하여 각 데이터를 뿌려주는 형태로 코드를 작성하였다.

 

⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️