Back Ground

Vue 라이프 사이클 인스턴스의 상태에 따라 호출 할 수 있는 속성들을 Life Cycle(생명주기)라 한다. 라이프사이클에 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(Life Cycle Hook)이라고 한다. 뷰 인스턴스도 객체이기 때문에 생명주기를 가지는데 속성의 종류는 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 이렇게 8종으로 나뉜다. 1. Creation [컴포넌트 초기화 단계] Creation 단계에서 실행되는 훅(hook)들이 라이프 사이클 중에 가장 처음 실행된다. 이 단계는 컴포넌트가 돔에 추가되기 전인데 서버 렌더링에서도 지원하는 훅이다. beforeCreate -인스턴스가..

Vue에서 데이터와 UI를 건드려야 하는 상황에 DOM을 못 찾는 상황이 생긴다. 데이터를 통해 만들어진 DOM이 완성되기 전 호출을 하려고 하는 상황인데 어떤 데이터를 vue._data에 삽입하자마자 삽입 후 갱신 될 DOM을 찾아 처리하려고 하면 DOM을 찾지 못한다는 에러 문구만 나올 뿐이다. 모든 데이터처리가 비동기로 처리되는 Javascript의 특성 때문에 DOM이 갱신되기 전 탐색하는 상황이 나오게된다. 오류 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 new Vue({ el: '#app', data: function() { return { list: [] }; }, created:..

vm.$인스턴스 속성 vm.$datavm.$propsvm.$elvm.$optionsvm.$parentvm.$rootvm.$slotsvm.$scopedSlotsvm.$refsvm.$isServervm.$attrsvm.$listeners - $refs $refs를 알기전에 ref(Reference)[참조]에 대해서 알아여 한다. [ ref ]ref 엘리먼트 또는 자식 컴포넌트에 대한 참조를 등록하는데 사용한다. 참조는 부모 컴포넌트의 $refs 객체 아래에 등록된다. 일반 DOM 엘리먼트에서 사용되는 경우 참조는 해당 엘리먼트이다. 하위 컴포넌트에서 사용되는 경우 참조는 컴포넌트 인스턴스이다.12345hello cs 즉, $refs는 ref의 집합[ ref ]속성이 등록된 자식 컴포넌트를 보관는 객체이다 H..

디렉티브(Directive) 그대로 번역하면 지시문을 뜻한다.Vue엘리먼트에서 사용되는 특별한 속성이다.기능상에서 가장 중요한 역할인 엘리먼트에게 ~~하게 작동하라 하고 지시를 해주는 지시문인거다. - 소개디렉티브는 Vue의 기능들을 사용하기 위해서 사용하는HTML태그안에 들어가는 하나의 속성이다.디렉티브는 여러종류가 있는데모두 v-text 이런식으로 'v-' 라는 앞글자를 지니고 있다. - 종류디렉티브는 현재 13개의 종류가 있다. 참고 v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-pre v-cloak v-once - 사용 1) v-text 디렉티브 1{{ name }}cs 이것과 같은 기능을 {{ }}을 사용하는 대신 ..

Mustache 템플릿 문법 Mustache는 제어 구조를 갖춘 것 중 (아마도) 가장 문법이 간단하고 (아마도) 가장 많은 언어로 포팅된 템플릿 엔진이다. Mustache를 기반으로 이를 확장한 템플릿 엔진도 여럿 있는데 대표적으로는 - 헬퍼 개념을 추가한 Handlebars와 - 트위터에서 만든 Hogan.js를 들 수 있다. 그리고 Vue.js 에서도 Mustache를 사용 가능하다. - 변수{{와 }} 사이에 변수 이름을 입력한다. 문자열은 자동으로 HTML 이스케이프가 되어 출력되는데 만약 이스케이프 되지 않은 문자열을 출력하고 싶다면 {{{와 }}}를 사용한다. 참고로 Mustache는 구분자로 사용하는 {, } 기호가 콧수염 모양이라서 붙인 이름이다. - 데이터1234{ "name" : "C..

Vue(뷰) vue는 view와 같은 발음을 한다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다. 그리고 뷰는 - 현대적 도구 - 지원하는 라이브러리 를 함께 사용하여 단일 페이지 응용프로그램(SPA)을 지원 할 수 있다. > React나 Angular에 비교해보기(다른 SPA를 알고 있다면 보는걸 추천) 이전 React를 공부했었기 때문에 React와 간단하게 비교하자면 공통점 차이점 React와 Vue는 많은 공통점을 공유한다. - 가상 DOM을 활용한다. - 반응적이고 조합 가능한 컴포넌트를 제공한다. - 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있다. Vue가 랜더링 속도가 빠르다 . Vue Rea..