[Vue.JS] 라이프 사이클 Vue.JS의 라이프 사이클은 Vue.JS 어플리케이션을 구현할 때 빼 놓을 수 없는, 빼 놓고는 Vue.JS 어플리케이션을 개발하기 힘든, 매우 중요한 개념입니다. Vue.JS의 라이프 사이클은 크게 Create, Mount, Update, Destory로 나눌 수 있습니다. Vue.JS의 라이프 사이클 1. Create Vue.JS의 라이프 사이클들 중에 가장 먼저 실행됩니다. create 단계에서 실행되는 라이프 사이클 훅(hook)들은 컴포넌트가 DOM에 추가 되기 전이기 때문에, DOM에 접근하거나 this.$el을 사용할 수 없습니다. 컴포넌트가 DOM에 추가 되기 전에 호출 되기 때문에 서버 사이드 렌더링에서도 지원되는 훅입니다. Create 단계에서 호출되는 라이프 사이클 훅들은 befor.. ROUTER _v1 Vue 애플리케이션에서 Vue Router 사용하는 방법 Vue Router를 사용하려면 우선 명시적으로 Vue Router를 Vue에 추가해줘야 합니다. [Vue의 use매소드를 사용하여 Vue Router을 추가한 모습 index.js] import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) Vue CLI를 사용하여 프로젝트를 생성할 때 Vue Router를 사용하겠다고 선택하면 자동으로 작성되는 코드이기도 하다. 그 후 Vue Router인스턴스를 생성하고 애플리케이션에서 사용할 라우트 설정들을 Vue Router에 추가해야 한다. [Vue Router 인스턴스를 생성하며 간단한 라우트 설정들을 추가한 모습 index.js] ex.. 범위 컴파일 사용하기 ( slot ) 범위 컴파일은 외부에서 주입받는 템플릿이다. 범위 컴파일은 Vue가 제공해주는 내장 컴포넌트인 slot 컴포넌트와 속성을 통해 사용할 수 있다. 주입하는 템플릿에는 일반적인 템플릿 문법을 사용한 데이터 바인딩이 가능하다. 주의해야 할 점은 이때 사용되는 데이터는 slot 컴포넌트를 가지고 있는 컴포넌트의 데이터가 아니라 템플릿을 주입하는 컴포넌트 쪽의 데이터라는 것이다. Foo 컴포넌트의 내용입니다. slot 컴포넌트에 아무런 이름을 부여하지 않을 경우 slot 컴포넌트는 자동으로 default라는 이름을 부여받게 된다. vm.$slots.default {{message}} 위 코드에서 알 수 있듯이 외부에서 주입하는 템플릿에 사용되는 데이터는 Foo 컴포넌트의 상태가 아니라 Foo 컴포넌트를 사용하고 .. Vue 인스턴스의 속성과 메소드 ($attrs, $set, $delete, $nextTick, $emit, $forceUpdate...) Vue 인스턴스 및 Vue 인스턴스가 확장된 컴포넌트에서 사용할 수 있는 속성과 메소드들이다. 그중 자주 사용하는 유용한 속성들을 위주로 살펴보도록 하자. 1. vm.$data, vm.$props 데이터 옵션들에 접근 가능한 속성이다. 해당 컴포넌트의 data 옵션과 props 옵션의 내용에 접근 가능하다. 2. vm.$el el은 Element의 줄임말로, Vue 인스턴스의 DOM 엘리먼트를 의미한다. 컴포넌트의 엘리먼트는 HTMLElement 타입의 DOM 객체다. 3. vm.$parent, vm.$children, vm.$root $parent 속성과 $children 속성은 현재 인서턴스의 부모와 자식들을 의미 한다. 부모는 언제나 하나 이지만 자식은 둘 이상이 있을수 있으므로 복수형이다. $ro.. Vue CLI 1. 설치 방법 Vue 프레임워크는 애플리케이션 환경을 쉽고 빠르게 구축할 수 있는 CLI(Command Line Interface)를 제공해준다. [주의] Vue CLI를 이용하기 위해서는 NodeJS 6.x 버전 이상, npm 3 버전 이상의 환경이 설치되어 있어야 한다. Vue CLI의 설치를 위해서 먼저 터미널 혹은 CMD에 설치 명령어를 입력한다. npm install vue-cli -g Vue CLI의 버전을 확인하는 명령어 vue -V # 혹은 vue --version 만약 Vue CLI 3.x 버전을 사용하고 있다고 하더라도 Vue CLI 2.x 버전을 사용하는데 문제는 없습니다. 만약 이미 Vue CLI의 버전이 3.x 버전이 설치되어 있다면 @vue/cli-init을 글로벌로 설치한 후.. 이전 1 다음
