😀

05. Vue.js

태그

Vue.js

•

사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 Progressive Framework

특징

•

Approachable (접근성)

•

Versatile (유연성)

•

Performant (고성능)

MVVM Pattern

•

Model + View + ViewModel

◦

Model : 순수 자바스크립트 객체

◦

View : 웹페이지의 DOM

◦

ViewModel : Vue의 역할

•

기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 library 이용.

•

Vue는 view와 model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함

Vue instance 생성

•

Vue가 적용될 요소 지정. 

•

CSS Selector or HTML Element

data

•

Vue에서 사용되는 정보 저장

•

객체 또는 함수의 형태

template

•

화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성

•

뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음

methods

•

화면 로직 제어와 관계된 method를 정의하는 속성

•

마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가

created

•

뷰 인스턴스가 생성되자 마자 실행할 로직을 정의

Vue instance의 유효 범위

•

Vue Instance를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용

•

el 속성과 밀접한 관계가 있다.

Vue instance Life Cycle

•

Life Cycle은 크게 나누면 Instance의 생성, 생성된 Instance를 화면에 부착, 화면에 부착된 Instance의 내용이 갱신, Instance가 제거되는 소멸의 4단계로 나뉜다.

Life Cycle Hooks

beforeCreate

•

Vue Instance가 생성되고 각 정보의 설정 전에 호출.

•

DOM과 같은 화면요소에 접근 불가

created

•

Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출

•

Instance가 화면에 부착하기 전이기 때문에 template 속성에 정의된 DOM 요소는 접근 불가

•

서버에 데이터를 요청(http 통신)하여 받아오는 로직을 수행하기 좋음

beforeMount

•

마운트가 시작되기 전에 호출

mounted

•

지정된 element에 Vue Instance 데이터가 마운트 된 후에 호출

•

template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행

beforeUpdate

•

데이터가 변경될 때 virtual DOM이 랜더링, 패치되기 전에 호출

updated

•

Vue에서 관리하는 데이터가 변경되어 DOM이 업데이트 된 상태

•

데이터 변경 후 화면 요소 제어와 관련된 로직을 추가

beforeDestroy

•

Vue Instance가 제거되기 전에 호출

destroyed

•

Vue Instance가 제거된 후에 호출

보간법

•

데이터 바인딩의 가장 기본 형태는 "Mustache" 구문(이중 중괄호)을 사용한 텍스트 보간

◦

{{ 속성명 }}

•

v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행

<span> 메시지 : {{ msg }} </span>
<span v-once> 다시는 변경하지 않습니다 : {{ msg }} </span>
HTML
복사

Directive

•

디렉티브는 v-접두사가 있는 특수 속성

•

디렉티브 속성 값은 JavaScript 표현식이 된다. (v-for는 예외)

•

디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용

v-model

•

양방향 바인딩 처리를 위해서 사용 (form의 input, textarea)

•

view 데이터를 변경시키면 model에도 적용

<div id = "app">
        <input type="text" v-model="message"/><br/>
        입력 메세지 : {{message}}
</div>
HTML
복사

v-bind

•

엘리먼트의 속성과 바인딩 처리를 위해서 사용

•

v-bind는 약어로 : 로 사용 가능