Vue.js

Vue.js의 특징

- Approachable(접근성)

- Versatile(유연성)

- Performant(고성능)

 

MVVM Pattern

- Model + View + ViewModel

- Model : 순수 자바스크립트 객체

- View : 웹페이지의 DOM

- ViewModel : Vue의 역할

- 기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 라이브러리 이용

- Vue는 view와 model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함.

 

Vue Instance 생성

<script>
	new Vue({
    	el: '#app",
        data: {
        	message: '첫번째 메세지'
        }
    });
</scipt>

- el : Vue가 적용될 요소 지정. CSS Selector 또는 HTML Element

- data : Vue에서 사용되는 정보 저장, 객체 또는 함수의 형태

- template : 화면에 표시할 HTTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.

- methods : 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가.

- created : 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의.

 

Vue Instance의 유효 범위

- Vue Instance를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용.

- el 속성과 밀접한 관계가 있다.

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

 

Vue Instance Life Cycle

- Life Cycle은 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 나뉜다.

life cycle 속성	설명
beforeCreate	Vue Instance가 생성되고 각 정보의 설정 전에 호출. DOM과 같은 화면요소에 접근 불가.
created	Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출. Instance가 화면에 부착하기 전이기 때문에 template 속성에 정의된 DOM 요소는 접근 불가. 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다.
beforeMount	마운트가 시작되기 전에 호출.
mounted	지정된 element에 Vue Instance 데이터가 마운트 된 후에 호출. template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행.
beforeUpdate	데이터가 변경될 때 virtual DOM이 렌더링, 패치 되기 전에 호출.
updated	Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태. 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가.
beforeDestroy	Vue Instance가 제거되기 전에 호출.
destroyed	Vue Instance가 제거된 후에 호출.

 

template

- 보간법(Interpolation)

- 문자열

 : 데이터 바인딩의 가장 기본 형태는 "Mustache" 구문(이중 중괄호)을 사용한 텍스트 보간.

 : v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행

- 원시 HTML

 : 이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 해석

 : 실제 HTML을 출력하려면 v-html 디렉티브를 사용

- javaScript 표현식 사용

 : Vue.js는 모든 데이터 바인딩 내에서 javaScript 표현식의 모든 기능을 지원

 : 한 가지 제한사항은 각 바인딩에 하나의 단일 표현식만 포함될 수 있다.

 

디렉티브(Directives)

- 디렉티브는 v- 접두사가 있는 특수 속성

- 디렉티브 속성 값은 단일 JavaScript 표현식이 된다. (v-for는 예외)

- 디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용.

• v-text
• v-html
• v-bind : 엘리먼트의 속성과 바인딩 처리를 위해서 사용 (약어로 : 사용 가능)
• v-once
• v-model : 양방향 바인딩 처리를 위해서 사용 (form의 input, textarea)
• v-show : 조건에 따라 엘리먼트를 화면에 렌더링 (style의 display를 변경)
• v-if : 조건에 따라 엘리먼트를 화면에 렌더링
• v-else-if
• v-else
• v-for : 배열이나 객체의 반복에 사용 ( v-for="요소변수이름 in 배열" or v-for="(요소변수이름, 인덱스) in 배열")
• v-cloak : Vue Instance가 준비될 때까지 mustache 바인딩을 숨기는데 사용, [v-cloak] {display:none}과 같은 css규칙과 함께 사용, Vue Instnce가 준비되면 v-cloak는 제거됨.
• v-on : DOM 이벤트를 듣고 트리거 될 때 javaScript를 실행할 수 있다. 이벤트 처리 핸들러

	v-if	v-show
렌더링	false일 경우 X	항상 O
flase일 경우	엘리먼트 삭제	display:none 적용
template 지원	O	X
v-else 지원	O	X

 

template

- <template>

- 여러 개의 태그들을 묶어서 처리해야 할 경우 template 사용

- v-if, v-for, component등과 함께 많이 사용

 

Vue method

- Vue Instance가 생성된 관련된 data 및 method의 정의 가능

- method안에서 data를 "this.데이터이름"으로 접근 가능

 

Vue filter

- filter를 이용하여 표현식에 새로운 결과 형식을 적용

- 중괄호 보간법 [ {{ }} ] 또는 v-bind 속성에서 사용이 가능.

- {{ message | capitalize }}

- <div v-bind:id="rawId | formatId"></div>

- 전역 필터

Vue.filter(
	'count1', (val) => {
    	if(val.length == 0) {
        	return;
        }
        return `${val} : ${val.length}자`;
     }
};

- 지역 필터

new Vue({
	el: '#app',
    filters: {
    	count2(val, alternative) {
        	if(val.length == 0) {
            	return alternative;
            }
            return `${val} : ${val.length}자`;
            }
        }
  })

 

Vue computed  속성

- 특정 데이터의 변경사항을 실시간으로 처리

- 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환

- setter와 getter를 직접 지정할 수 있음

- 작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property처럼 사용

- computed속성은 Vue Instance가 생성될 때, data의 message값을 받아 reversedMsg를 계산하여 저장해 놓는다.(캐싱)

- method는 reverseMsg()를 사용하려고 할 때 마다 계산한다. 

 

Vue watch 속성

- Vue Instance가 특정 property가 변경될 때 실행할 콜백 함수 설정

 

Vue event

- DOM Event를 청취하기 위해 v-on 디렉티브 사용

- inline event handling

- method를 이용한 event handling

- method event handler

 : 이벤트 발생시 처리 로직을 v-on에 넣기 힘들다.

 : 이때문에 v-on에서는 이벤트 발생시 처리해야 하는 method이름을 받아 처리.

- inline method handler

 : 메소드 이름을 직접 바인딩하는 대신 인라인 JavaScript 구문에 메소드를 사용할 수도 있다.

 : 원본 DOM 이벤트에 액세스 해야 하는 경우 특별한 $event 변수를 사용해 메소드에 전달할 수도 있다.

- 이벤트 수식어(Event Modifier)

 : event.preventDefault()와 같이 method내에서 작업을 할 수도 있지만 method는 DOM의 이벤트를 처리하는 것보다 data 처리를 위한 로직만 작업하는 것이 좋다.

 : 이 문제를 해결하기 위해, Vue는 v-on 이벤트 수식어를 제공한다.

 : 수식어는 점으로 표시된 접미사이다.

 : <a v-on:click.stop="doThis">  // 클릭 이벤트 전파가 중단된다.

 : <form v-on:submit.prevent="onSubmit"> // 제출 이벤트가 페이지를 다시 로드하지 않는다.

 : <a v-on:click.stop.prevent="doThat">  // 수식어는 체이닝이 가능하다.

 : <form v-on:submit.prevent>  // 단순히 수식어만 사용할 수 있다.

 

키 수식어(Key Modifier)

- Vue는 키 이벤트를 수신할 때 v-on에 대한 키 수식어를 추가할 수 있다.

- <input v-on:keyup.enter="submit">

 

ref, $refs.

- 뷰에서는 $refs 속성을 이용해 DOM에 접근할 수 있다.

- 단, 뷰의 가장 중요한 목적 중 하나는 개발자가 DOM을 다루지 않게 하는 것이므로, 되도록 ref를 사용하는 것을 피하는 것이 좋다.

 

class binding

- element의 class와 style을 변경

- v-bind:class는 조건에 따라 class를 적용할 수 있다.

 

폼 입력 바인딩(Form Input Binding)

- v-model directive를 사용하여 폼 input과 textarea element에 양방향 데이터 바인딩을 생성할 수 있다.

- text와 textarea태그는 value속성과 input이벤트를 사용한다.

- textbox는 {{ }} 작동하지 않는다. -> v-model를 사용

- 체크박스들과 라디오버튼들은 checked 속성과 change 이벤트를 사용한다.

- select 태스는 value를 prop으로 change를 이벤트로 사용한다.

 

form-checkbox

- 하나의 체크박스는 단일 boolean값을 갖는다.

- 여러 개의 체크박스는 같은 배열을 바인딩 할 수 있다.

- 배열의 값과 checkbox의 value 속성이 같을 경우 체크 처리됨.

 

form-radio

- 선택된 항목의 value속성의 값을 관리

 

form-select

- select box일 경우 선택죈 항목의 value속성의 값을 관리

- `v-model` 표현식의 초기 값이 어떤 옵션에도 없으면, `<select>` element는 "선택없음" 상태로 렌더링된다.

- form - select (multiple) 다중선택도 가능 -> 배열로 받는다.

 

form-수식어(Modifier)

- .lazy : .lazy 수식어를 추가하여 change이벤트 이후에 동기화 할 수 있다.

- .number : 사용자 입력이 자동으로 숫자로 형 변환 되기를 원한다면, v-model이 관리하는 input에 number 수식어를 추가하면 된다.

- .trim : v-model이 관리하는 input을 자동으로 trim하기 원하면, trim 수정자를 추가하면 된다.

 

컴포넌트(Component)

- Vue의 가장 강력한 기능 중 하나

- HTML Element를 확장하여 재사용 가능한 코드를 캡슐화

- Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용

- Life Cycle Hook 사용 가능

- 전역 컴포넌트와 지역 컴포넌트 

 

전역 컴포넌트 등록

- 전역 컴포넌트를 등록하려면, Vue.component(tagName, options)를 사용

- 권장하는 컴포넌트 이름 : 케밥 표기법(전부 소문자, -)

 

지역 컴포넌트 등록

- 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있다.

 

컴포넌트간 통신

- 상위(부모) - 하위(자식) 컴포넌트 간의 data 전달 방법

- 부모에서 자식 : props라는 특별한 속성을 전달

- 자식에서 부모 : event로만 전달 가능

 

상위에서 하위 컴포넌트로 data 전달

- 하위 컴포넌트는 상위 컴포넌트의 값을 직접 참조 불가능

- data와 마찬가지로 props 속성의 값을 template에서 사용이 가능

 

렌더링 과정

1. new Vue()로 상위 컴포넌트인 인스턴스를 하나 생성

2. Vue.component()를 이용하여 하위 컴포넌트인 child-componenet를 생성

3. <div id="app"> 내부에 <child-component>가 있기 때문에 하위 컴포넌트가 된다. 처음 생성한 인스턴스 객체가 #app의 요소를 가지기 때문에 부모와 자식 관계가 성립한다.

4. 하위 컴포넌트에 props 속성을 정의한다. ['propsdata']

5. html에 컴포넌트 태그(child-component)를 추가한다.

6. 하위 컴포넌트에 v-bind 속성을 사용하면 상위 컴포넌트의 data의 key에 접근이 가능하다. (message)

7. 상위 컴포넌트의 message 속성 값인 String값이 하위 컴포넌트의 propsdata로 전달된다.

8. 하위 컴포넌트의 template 속성에 정의된 '<span>{{ propsdata }} </span>'에게 전달된다.

 

동적 props

- v-bind를 사용하여 부모의 데이터에 props를 동적으로 바인딩할 수 있다.

- 데이터가 상위에서 업데이트 될 때마다 하위 데이터로도 전달된다.

- v-bind에 대한 단축 구문을 사용하는 것이 더 간단하다. 

 

객체의 속성(properties) 전달 props

- 오브젝트의 모든 속성을 전달할 경우, v-bind:prop-name 대신 v-bind만 작성함으로써 모든 속성을 prop으로 전달할 수 있다.

 

사용자 정의 이벤트(Custom Event)

- 이벤트 이름

 : 컴포넌트 및 props와는 달리, 이벤트는 자동 대소문자 변환을 제공하지 않는다.

 : 대소문자를 혼용하는 대신에 emit할 정확한 이벤트 이름을 작성하는 것을 권장

 : v-on 이벤트 리스너는 항상 자동으로 소문자 변환되기 때문에 v-on:myEvent는 자동으로 v-on:myevent로 변환된다. 이름이 my-event일 경우 myEvent를 들을 수 없다.

- 이러한 이유 때문에 이벤트 이름에는 kebab-case를 사용하는 것이 권장됨.

 

하위에서 상위 컴포넌트로 event전달

- 하위 컴포넌트에서 상위 컴포넌트가 지정한 이벤트를 발생($emit)

- 상위 컴포넌트는 하위 컴포넌트가 발생한 이벤트를 수신(on)하여 data 처리

 

비 상하위간 통신

- 비어 있는 Vue Instance 객체를 Event Bus로 사용

- 복잡해질 경우 상태관리 라이브러리인 Vuex 사용 권장