1. 뷰 인스턴스#

뷰 인스턴스 정의와 속성#

<html>
  <head>
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      });
    </script>
  </body>
</html>

뷰 인스턴스의 유효범위#

뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용

new Vue()로 인스턴스를 생성하고 나서 화면에 인스턴스 옵션 속성을 적용하는 과정

  1. 뷰 라이브러리 파일 로딩
  2. 인스턴스 객체 생성(옵션 속성 포함)
  3. 특정 화면 요소에 인스턴스를 붙힘
  4. 인스턴스 내용이 화면 요소로 변환
  5. 변환된 화면 요소를 사용자가 최종 확인

뷰 인스턴스 라이프사이클 #

beforeCreate#

created#

data속성과 methods속성이 정의되었기 때문에 this.data또는 this.fetchData()와 같은 로직을 이용해서 data속성과 methods속성에 정의된 값에 접근하여 로직을 수행가능 다만 인스턴스가 화면요소에 부착되기 전이기 때문에 template속성에 정의된 DOM요소로 접근할 수 없음 서버에 데이터를 요청해서 받아오는 로직을 수행하기 좋음

beforeMount#

mounted#

el속성에 지정한 화면요소에 인스턴스가 부착되고 나서 호출되는 단계 template속성에서 정의한 화면요소에 접근할수 있어서 화면요소를 제어하는 로직을 수행하기 좋음 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면요소들이 최종 HTML코드로 변환되는 시점과 다를수 있음

beforeUpdate#

updated#

데이터가 변경되고 나서 가상 DOM으로 다시 화면을 그리고 나면 실행되는 단계

beforeDestroy#

destroyed#

<html>
  <head>
    <title>Vue Instance Lifecycle</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        },
        beforeCreate: function() {
          console.log("beforeCreate");
        },
        created: function() {
          console.log("created");
        },
        mounted: function() {
          console.log("mounted");
        },
        updated: function() {
          console.log("updated");
        }
      });
    </script>
  </body>
</html>

2. 뷰 컴포넌트#

컴포넌트 등록하기#

전역 컴포넌트 등록#

Vue.component('컴포넌트 이름', {
    // 컴포넌트 내용
})

지역 컴포넌트 등록#

new Vue({
    components: {
        '컴포넌트 이름': 컴포넌트 내용
    }
})

3. 뷰 컴포넌트 통신#

상위에서 하위 컴포넌트로 데이터 전달하기#

props속성#

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할때 사용하는 속성

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Props Sample</title>
  </head>
  <body>
    <div id="app">
      <!-- 팁 : 오른쪽에서 왼쪽으로 속성을 읽으면 더 수월합니다. -->
      <child-component v-bind:propsdata="message"></child-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      Vue.component('child-component', {
        props: ['propsdata'],
        template: '<p>{{ propsdata }}</p>',
      });
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue! passed from Parent Component'
        }
      });
    </script>
  </body>
</html>

하위에서 상위 컴포넌트로 이벤트 전달하기#

이벤트 발생과 수신#

// 이벤트 발생
this.$emit('이벤트명');

// 이벤트 수신
<child-component v-on:이벤트명="상위 컴포넌트의 메소드명"></child-component>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Event Emit Sample</title>
  </head>
  <body>
    <div id="app">
      <child-component v-on:show-log="printText"></child-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      Vue.component('child-component', {
        template: '<button v-on:click="showLog">show</button>',
        methods: {
          showLog: function() {
            this.$emit('show-log');
          }
        }
      });
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue! passed from Parent Component'
        },
        methods: {
          printText: function() {
            console.log("received an event");
          }
        }
      });
    </script>
  </body>
</html>

관계없는 컴포넌트간 통신 - 이벤트 버스#

이벤트 버스 형식#

// 이벤트 버스를 위한 추가 인스턴스 생성
var eventBug = new Vue();

// 이벤트를 보내는 컴포넌트
methods: {
    메소드명: function() {
        eventBus.$emit('이벤트명', 데이터);
    }
}

// 이벤트를 받는 컴포넌트
methods: {
    created: function() {
        eventBus.$on('이벤트명', function(데이터) {
            ...
        });
    }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Event Bus Sample</title>
  </head>
  <body>
    <div id="app">
      <child-component></child-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      var eventBus = new Vue();
      Vue.component('child-component', {
        template: '<div>하위 컴포넌트 영역입니다.<button v-on:click="showLog">show</button></div>',
        methods: {
          showLog: function() {
            eventBus.$emit('triggerEventBus', 100);
          }
        }
      });
      var app = new Vue({
        el: '#app',
        created: function() {
          eventBus.$on('triggerEventBus', function(value){
            console.log("이벤트를 전달 받음. 전달 받은 값 : ", value);
          });
        }
      });
    </script>
  </body>
</html>

Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
jpg
DoIt_뷰라이프사이클다이어그램.jpg 100.8 kB 1 12-Aug-2018 22:28 DongGukLee
« This page (revision-6) was last changed on 13-Aug-2018 09:30 by DongGukLee