Do it Vue.js 입문 정리2

Vue 인스턴스

:Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위

ex)Vue 인스턴스 예시

 new Vue({

       

      });

Vue 인스턴스 옵션 속성

-data

-el

-template(화면에서 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. Vue의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음)

-methods(화면 로직 제어와 관계된 메소드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면동작과 관련된 로직을 추가할 수 있음)

-created(vue instance가 생성되자마자 실행할 로직을 정의할 수 있는 속성)

Vue 인스턴스의 유효범위

Vue 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성이 적용되어 나타남

인스턴스의 유효범위는 el 속성과 밀접한 관계가 있음

Vue 인스턴스 라이프 사이클

-생성

-화면에 부착

-내용 갱신

-소멸

<<<<<<<<<사진>>>>>>>>>>>>>

Vue 컴포넌트

:조합하여 화면을 구성할수 있는 블록(화면의 특정 영역)을 의미

컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 가능

Vue에서는 웹 화면을 구성할 때 흔히 사용하는 내비게이션 바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요스들을 잘게 쪼개어 컴포넌트로 관리합니다

ex) 웹 화면 예시

Header

Content -> Aside, List

Footer

컴포넌트 등록 방식

-전역

-지역

전역 컴포넌트 등록

Vue.component('컴포넌트이름',{

  //컴포넌트 내용

  //template

  //data

  //methods

});

컴포넌트이름은 케밥기법(변수가 단어의 조합으로 이루어져있을때, 단어와 단어 사이를 -로 잇는 변수 명명방식)으로 하게되며 

컴포넌트 이름은 template속성에서 사용한 HTML 사용자 정의 태그 이름을 의미함

ex)

Vue.component('my-component', {

        template: '<div>전역 컴포넌트가 등록되었습니다!</div>'

      });

지역 컴포넌트 등록

new Vue({        

        components: {

          '컴포넌트이름': 컴포넌트 내용

        }

      });

컴포넌트 이름은 전역 컴포넌트와 마찬가지로 HTML에 등록하 사용자 정의 태그를 의미하고,

컴포넌트 내용은 컴포넌트 태그가 실제 화면 요소로 변환될 때의 내용을 의미합니다

ex)

new Vue({

        el: '#app',

        components: {

          'my-local-component': cmp

        }

      });

Vue 컴포넌트 통신

컴포넌트는 각각 고유한 유효 범위를 가지고 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없음

따라서 Vue 프레임워크 자체에서 정의한 컴포넌트 데이터전달 방법을 따라야 함

상위 하위는 트리구조임

상위 컴포넌트->하위 컴포넌트 : props로 전달

하위 컴포넌트->상위 컴포넌트 : 이벤트 발생

이벤트 발생후 이벤트 수신을 하는 개념을 이용한다

//이벤트 발생 

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

//이벤트 수신

<child-component v-on:이벤트명="상위 컴포넌트의 메소드 명"></child-component>

ex)상위컴포넌트가 하위컴포넌트로 보낼때 

   <div id="app">

      <!-- 팁 : 오른쪽에서 왼쪽으로 속성을 읽으면 더 수월합니다. -->

      <child-component v-bind:propsdata="message"></child-component>

    </div>

상위 컴포넌트는 div태그

하위 컴포넌트는 child-component임

    Vue.component('child-component', {

        props: ['propsdata'],

        template: '<p>{{ propsdata }}</p>',

      });

      new Vue({

        el: '#app',

        data: {

          message: 'Hello Vue! passed from Parent Component'

        }

      });

ex)하위컴포넌트가 상위 컴포넌트로 이벤트 발생후 수신되는 될때

    <div id="app">

      <child-component v-on:show-log="printText"></child-component>

    </div>

     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");

          }

        }

      });

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

컴포넌트 통신은 항상 상위-하위 구조를 유지해야만 데이터를 주고 받을 수 있었지만 이벤트 버스는 상위 하위 구조를 가지지 않고도 데이터를 한 컴포넌트에서 다른 컴포넌트로 전달할 수 있음

이벤트 버스 형식

//이벤트 버스를 위한 추가 인스턴스 1개 생성

var eventBus = new Vue();

//이벤트를 보내는 컴포넌트

methods:{

        메소드명 : function(){

                eventBus.$emit('이벤트명',데이터);

         }

}

//이벤트를 받는 컴포넌트

methods:{

    created: function(){

           eventBus.$on('이벤트명', function(데이터){

                        내용들

           });

     }

}

ex)

    <div id="app">

      <child-component></child-component>

    </div>

  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);

          });

        }

      });

이벤트 버스를 활용하면 props속성을 이용하지 않고도 원하는 컴포넌트 간에 직접적으로 데이터를 전달할 수 있어 편리하지만 컴포넌트가 많아지면 어디로 보냈는지 관리가 되지 않는 문제가 발생합니다

이 문제를 해결하려면 뷰엑스란느 상태관리도구가 필요합니다.

vuex : 컴포넌트간의 데이터 관리를 효율적으로 하는 라이브러리