Vue.js 소개 및 매뉴얼: https://kr.vuejs.org/v2/guide/
인스턴스의 라이프사이클
beforeCreate
: 인스턴스가 초기화 된 직후 데이터 관찰 및 이벤트 설정 전에 동기적으로 호출되는 단계입니다.create
: 인스턴스가 작성된 후 beforeCreate 다음 단계에 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료합니다. data 속성에 접근할 수 있는 단계이므로 서버에 데이터를 받아오는 작업은 이 단계에서 수행하는 것이 좋습니다.beforeMount
: 마운트(HTML 요소를 페이지에 렌더링하는 것을 요청)가 시작되기 바로 전에 호출됩니다.mounted
: 마운트 된 후에 실행됩니다. 렌더링 요청 직후에 호출되므로 실제 HTML 요소가 페이지에 렌더링되는 시점과는 차이가 있을 수 있습니다. 화면 요소를 제어하는 작업은 이 단계에서 수행하는 것이 좋습니다.beforeUpdate
: 데이터가 변경되면, 가상 DOM 재 렌더링과 패치가 이뤄지기 전에 호출됩니다.updated
: 데이터가 변경되어 가상 DOM이 재 렌더링되고 패치되면 호출됩니다. 이 단계에서 데이터 값 변경을 시도할 경우 무한 루프에 빠질 수 있습니다.
예제: 이름으로 보는 2019년 운세
- 이름을 입력하면 이름을 변환한 해시값을 3등분하고 그 3등분한 부분을 금전운, 사업운, 생명운 수치로 환산해 수치와 해석을 화면에 뿌려주는 운세 예제입니다. 해시값은 원문과 1:1로 대응하므로 고유의 이름은 여러번 측정해도 동일한 수치가 나옵니다.
- 13라인의 DIV 요소의
id
속성에 사용할 id를 입력합니다. - 14라인에서
input
에v-model="[해당 vue 인스턴스의 data 객체에 있는 변수 키 이름(이하 데이터 키)]"
을 입력하면 실시간 동기화가 됩니다. 또한v-on:keyup.enter="hashing"
부분은 키보드의 엔터 버튼을 눌렀을 경우 해당 인스턴스의hashing
메소드(29라인)를 찾아 실행하라는 의미입니다. - 15라인의
v-on:click
속성은 클릭되었을 때 해당 인스턴스의hashing
메소드(29라인)를 찾아 실행하라는 의미입니다. - 16라인의
{{text}}
는 vue 객체에서text
데이터 키를 찾아 쌍괄호 안 부분을 해당 데이터로 렌더링하라는 의미입니다.text
는 처음에 빈 값으로 선언되어 있으므로 값이 나오지 않으나, 나중에text
가 외부에서 변경된다면 이 부분의 내용은 실시간으로 바뀔 것입니다. - 20라인은 Vue 인스턴스를 선언하는 부분입니다.
- 21라인의
el
에서app
이라는 아이디를 가진div#app
을 지정했으므로 앞으로 이 요소는 Vue 인스턴스에 의해 조작됩니다.el
에서 지정하지 않는다면 Vue 인스턴스와 무관한 요소이지만,el
을 지정하는 순간 인스턴스의 변경 내용은 이 요소에 즉각 반영됩니다. - 22라인의
data
에서 사용하고자 하는 데이터들을 선언합니다.data
자체는 객체이며, 그 안에 키-값들로 사용할 데이터를 미리 만들어 놓습니다. 여기서 만든 데이터들은 인스턴스 안에서this
키워드를 사용하거나 html 요소에서{{[데이터 키]}}
를 사용하여 접근할 수 있습니다. - 28라인에서는 사용자가 임의로 메소드(methiod)를 설정하여 추후 사용할 수 있도록 합니다. method는 뷰 인스턴스에서 사용할 함수들을 통칭하는 것이라고 보면 되겠습니다.
hashing: function(e){...}
에서hashing
이 메소드 이름이며 할당된 함수는 실행할 내용입니다. (e
는 이벤트 객체) - 66라인은 데이터를 외부에서 가져온다는 가정하에(예제이므로 단순한 변수로 선언했습니다.) create 라이프사이클 단계에서 데이터를 할당하는 작업을 실행하였습니다. AJAX를 사용하여 서버에 데이터를 가져오는 작업은 이 단계에서 수행하는 것이 좋습니다.
- 텍스트 필드에 값을 입력하고 엔터 혹은 버튼을 클릭하면, hashing 메소드가 실행되면서 결과를 data의 text에 업데이트하면, 업데이트 결과를 실시간으로 감지해 div의 {{text}}부분을 업데이트된 데이터로 실시간으로 업데이트하는 예제입니다.
JSFiddle에서 실행결과 보기
https://jsfiddle.net/fqjca584/
0개의 댓글