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 : 컴포넌트간의 데이터 관리를 효율적으로 하는 라이브러리

장기효

jangkeehyo@gmail.com

기술 블로그 : https://joshua1988.github.io

깃허브 : https://github.com/joshua1988

Vue.js의 초점은 더 많은 사람들이 쉡게 웹 앱을 만들 수 있도록 도와주는데 있다

-에반유(Vue.js 창시자)

프론트엔드 개발 실무자의 입장에서 Vue.js의 전망이 밝아 보이는 가장 큰 이유는 진입 장벽이 낮다는 것. 배우기도 쉽고 성능까지 우수

예제 다운로드

https://github.com/joshua1988/doit-vuejs

exam:예제코드

quiz:직접해보기

final:할일 관리 프로젝트

pwa:프로그래시브 웹 앱 프로젝트

Vue.js

명시적 렌더링(코어라이브러리) > 컴포넌트기반 > 클라이언트 사이드 라우팅(프레임워크 기능) > 상태관리

2014년 2월 처음으로 공식배포

2018년 현재 깃허브 별개수 80300개

Vue.js장점

-배우기가 쉬움

-리액트와 앵귤러에 비해 성능이 우수하고 빠름

-리액트의 장점과 앵귤러의 장점 가지고 있음(앵귤러의 데이터 바인딩 특성과 리액트의 가상돔 기반 렌더링 특징을 모두 가지고 있음)

https://vuejs.org/v2/guide/comparison.html

타입스크립트 : 기존 자바스크립트에 업격한 타입 체크를 도입한 언어. 앵귤러2의 표준

ES6 : 자바스크립트의 최신 스펙으로, ECMAScript 2015와 동일한 용어

웹팩 : 웹 모듈 번들러, 최신 프론트엔드 프레임워크에서 권고하는 필수 웹 성능 개선 도구

Vue.js의 특징

1)UI 화면단 라이브러리

Vue.js는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리입니다

MVVM패턴(위키피디아)

마크업 언어나 GUI 코드를 비지니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴

뷰(view)                         뷰모델(view Model)                        모델(model)

돔(DOM)                         뷰(Vue.js)                                   자바스크립트 객체(Javascript objects)

------------------------>돔리스너(DOM listener)----------------------------->

------------------------<데이터바인딩(Data binding-------------------------<

뷰(view) : 사용자에게 보이는 화면

돔(DOM) : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등의) 정보를 담고 있는 데이터 트리

돔 리스너(DOM Listener) : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치

모델(Model) : 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장

데이터 바인딩(Data Binding) : 뷰에 표시되는 내용과 모델의 데이터를 동기화

뷰 모델(ViewModel) : 뷰와 모델의 중간영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

2)컴포넌트 기반 프레임워크

리액트와 앵귤러도 모두 컨포넌트 기반의 개발 방식 추구

컴포넌트 기반방식으로 개발하는 이유는

:코드를 재사용하기 쉽기 때문, 그리고 Vue,js의 경우 컴포넌트를 썼을때 HTML코드에서 화면의 구조를 직관적으로 파악할 수 있음

3)리액트와 앵귤러의 장점을 가진 프레임워크

뷰는 앵귤러의 양방향 데이터 바인딩과(two-way data binding)과 리액트의 단방향 데이터 흐름(one-way data flow)의 장점을 모두 결합한 프레임워크

양방향 데이터 바인딩이란

:화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말함

단방향 데이터 흐름이란

:컴포넌트의 단방향 통신을 의미, 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 것

4) 그외

빠른 화면 렌더링을 위해 리액트의 가상 돔 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖추고 있습니다.

가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신합니다. 따라서 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 바르게 화면을 그릴 수 있습니다.

Vue.js 개발환경

-크롬브라우저

-텍스트 에디터

-node.js

-Vue 개발자도구

node.js

서버 사이드 자바스크립트로, 서버 측에서 실행되는 자바스크립트 실행 환경을 의미(Vue cli를 이용하려면 필요)

LTS버전을 다운로드 하는 하는 것이 더 좋음

Vue개발자 도구

구글에서 vue.js devtools로 검색

크롭 웹 스토어에 추가

setting-configuration-terminal에서

paste using right-click을 설정하면

드래그한 내용을 마우스 오른쪽 클릭으로 붙여넣기가 됨^^