Vue와 같은 프론트엔드 프레임워크들은 모두 MVVM 패턴 즉, Model, View, ViewModel 로 구성된 프론트엔드 패턴을 사용한다. 이 역시 로직과 UI를 분리하기 위한 방법인데, View 부분은 HTML, CSS로 구성된 일반 화면을 담당하고 Model은 서버에서 가져온 데이터를 말한다. 핵심요소인 ViewModel은 자바스크립트로 작성되어 Model의 데이터가 변경되면 View에 전달해 화면을 갱신하게 하고 반대로 사용자가 화면에서 값을 변경하면 그 값을 Model에 업데이트 하는 작업을 담당한다. 이 ViewModel은 Vue.js 프레임워크에서 제공하는 Vue객체이다. 따라서 우리는 v-model와 같이 directive을 통해 화면단의 데이터와 비즈니스 단의 데이터를 간편하게 동기화 시킬수 있다.( vue 프레임워크가 제공하는 양방향 데이터바인딩의 힘!)
const vi = new Vue({ el, data(), 라이프사이클훅함수, computed 등등 여러 options객체들을 통해 Vue객체를 생성한다)
Vue의 라이프사이클 훅은 크게 created, mounted, updated, destroyed 가 있다.
created 훅은 Vue객체가 생성되어 데이터에 대한 관찰이 가능해진 단계이다. (computed, mothods, watch 완료)
mounted 훅은 DOM요소가 el에 의해 가상DOM으로 대체된 후 호출되기 때문에 화면이 모두 그려져 화면에 대한 완벽한 제어가 가능해지는 단계다.
data는 created도 접근가능하지만 el영역은 mounted 부터 접근가능하다. (화면을제어할땐 mounted)
updated 훅은 데이터 변경으로 가상 DOM이 재렌더링 되고 패치된 후에 호출되는 단계다.
destroyed 훅은 vue객체가 제거된 후 호출된다.
model에 있는 데이터에 접근하기 위해 view단에서는 mustache 표기법은 {{ } 를 사용한다. --> v-text 대신 사용
v-html 은 html 태그를 해석해 출력해준다.
v-bind : html의 속성(id, class, style .... ) 에 model 값을 연결하기 위해서 사용한다.
v-bind:id --> :id (v-bind 생략가능)
v-model : view와 모델사이의 양방향 데이터 바인딩에 사용하는 디렉티브이다.
일반적으로 input, select , textarea 태그와 사용해 사용자 입력값과 모델에 입력값을 연결한다.
v-model의 수식어
#입력값을 기본적으로 문자열로 보내주기 때문에 .number를 체이닝하여 숫자로 바꿔서 전송하게끔 하자
Vue에서는 DOM 객체에 직접 접근하는것을 지양한다.
<a href="http://www.google.com">
J-Query였다면 DOM 객체에 직접 css셀럭터로 접근하여 Dom 객체 href의 속성값을 변경하였을 것이다.
하지만 Vue에서는 <a :href="google"> 와 같이 google이라는 모델이 관리하는 값과 연결하여 프레임워크가 관리하도록 한다.
html의 class 속성의 경우 여러 값을 설정할 수 있는데, 따라서 v-bind를 통해 배열안에 여러객체들 설정하고 model에서 boolean 타입으로 객체들을 관리해 해당 클래스를 on/off 하도록 처리할수 있겠다.
이런 느낌의 코드
v- if 태그는 조건의 해당하지 않으면 vue가 해당 태그를 주석처리하여 렌더링 자체를 하지 않는다. 따라서 자주 토글(변경)될 일이 없을때 사용하는 게 적절하겠다.
v-show는 조건불일치시 태그는 로드하고 display=none으로 처리해버린다. 비교적 초기렌더링 비용이 있지만 자주 바뀔때, 사용하면 v-if보다 효과적!
v-for 태그는 배열 또는 객체에 적용하여 반복문을 처리하는 디렉티브이다.
소괄호 ( ) 는 뒤에서 부터 하나씩 생략가능 하다. 물론 value는 생략불가능..! value 하나만 쓰일떄는 소괄호 () 생략이 가능하다. 특히 Vue에서는 반복문 처리 할때의 인덱스를 통해 처리속도를 높이기 위해 :key 속성을 권장한다. 배열에서는 index값 객체를 대상으로는 key값이 key로 세팅된다.
최근댓글