[Vue.js] Instance, directive

A) Vue.js 인스턴스

 

1) 뷰 인스턴스

• template
  • 뷰 instance에서 정의한 데이터와 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속서
• methods
  • 마우스 클릭이나 버튼 클릭과 같은 이벤트 처리하는 동적인 작업 처리 ( 사용자가 이벤트를 함 )
• computed
  • data 객체 내 프로퍼티에 변화가 발생할 때마다 변화됨 => React의 useEffect와 같음
• props
  • 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다.
• watch
  • data 객체 내의 데이터를 모니터링 할 수 있다. 특정 데이터에 변화가 생길 시 후속 처리 가능하다.

한페이지내의 인스턴스가 서로 격리되어있지 않기 때문에 하나의 뷰 인스턴스에 있는 데이터에 변화가 생길 경우, 다른 뷰 인스턴스에 영향을 줄 수 있으므로 의존성을 파악하기 어렵다. 그러므로 프로젝트 규모가 커질수록 하나의 인스턴스에는 다수의 컴포넌트로 구성하는 형태가 적합하다.

 

2) 뷰 인스턴스 생명주기 Vue interface Life cycle

1. vue 인스턴스가 new 키워드를 이용해 초기화되면서 시작
2. beforeCreatehook 발생
3. created hook 발생
4. 뷰 인스턴스의 data,event,computed,method 옵션 설정\
5. Vue는 인라인, el property로 참조된 템플릿을 컴파일하고 Virtual DOM을 업데이트 한다. 만일 el property가 없을 경우에는 $mount 메스가 실행된 후 이 과정이 진행된다.
6. beforeMountHook 실행
7. 템플릿 마운트템플릿 마운트 정상적 끝남
8. virtual DOM이 렌더링되고 결과가 실제 DOM에 적용된다.
9. 뷰의 인스턴스는 ㅡmounted 상태가 된다. vue == mounted상태
10. 이때 마운트되기 전 ㅡmounted hook일 이용할 수 있다.
11. 실제 DOM의 일부는 뷰 인스턴스에 포함된 템플릿과 데이터가 포함된다
12. 뷰 인스턴스에 정의된 데이터들에 변화가발생하면 dom에 변경사항 반영
13. 이 과정 진행되기 전 beforeUpdate hook이 발생
14. DOM에 변경 사항이 반영된 후 updated hook이 발생한다. 뷰 인스턴스는 mounted 상태에서 뷰 인스턴스에 정의된 데이터들에 변화가 발생

beforeUpdate hook - DOM 변경사항 반영 후 -updated hook

 

브라우저 실행 시 초기화면 lifecycle

 

 

데이터 변경 시 beforeUpdate,updated 호출

 

 

---

**디렉티브**

1) 흐름 제어 (v-if, v-for)

<div element v-if="표현식">
  // 조건문에 적합할 시 출력
</div>
<div element v-else>
  if의 조건문이 false일 경우 출력
</div>

2) v-if와 v-show

<div v-if="error"> 에러 발생 : 이미지를 로드하지 못했습니다.</div> 
<div v-show="appear">
  <img src="picture.jpg"/>
</div>

v-if의 표현식이 false일 경우 HTML Element는 DOM에 존재하지 않는다.

v-show는 DOM에 존재하지만 페이지에 나타나지 않는다. ==> display : none 상태

v-if는 DOM의 추가/삭제 동작을 보여주고, v-show는 DOM에서 사라지지않고, 페이지에서 보이기와 감추기 형태로 동작한다.

3) v-for 반복처리

<div v-for="item in items" v-bind:key="item의 한 속성"></div>
<div v-for="item in items" :key="iteml의 한 속성"></div>

items = 데이터의 집합

item = 데이터 집합 내 하나의 데이터

etc) v-bind

v-for 디렉티브를 이용해 리스트를 나타낼 때 사용, key 속성 설정 => 아이템 검색 및 정렬할 수 있도록 한다.

2) v-bind

v-bind 디렉티브는 html element에 하나 이상의 속성을 연결하는데 사용한다.

v-bind는 축약도 가능하므로, 일반형식이 v-bind:src라면 축약으로는 :src로 표현할 수 있다.

1) v-bind:key : v-for 디렉티브에서 v-bind:key는 반복 처리 할 때 데이터가 변경 될 경우 렌더링된 각 컴포넌트를 구분해야하므로 기본적으로 사용한다.

2) v-bind:class, v-bind:style :

data:{headingStyles{color:'blue'}} 일 경우
<h1 v-bind::style="headingStyles"/>를 통해 css 스타일 적용이 가능하다. 

3) v-bind:src, v-bind : 링크를 연결할 경우 축약과 일반형식을 사용할 수 있다.

<img v-bind:src="test.jpg"> or <img :src="test.jpg">

3) v-model

v-model => 양방향 데이터 바인딩을 가능하게 한 디렉티브

ex) input, checkbox, textarea, select와 같은 엘리먼트 속성 형태

양방향 데이터 바인딩이란  
사용자의 뷰 인스턴스내에 바인딩 된 데이터를 변경 혹은 뷰 인스턴스내에 바인딩된 데이터가 변경되면 사용자의 입력 부분도 변경된다. 
<input v-model ="name">

View는 form엘리먼트에 속하는 요소로 사용자가 볼 수 있는 요소를 의미한다. 
Model은 뷰 인스턴스의 data property 혹은 컴포넌트에 정의된 함수 형태의 data property에 정의된 데이터를 의미한다.  

즉, 아래 예시를 보면

<input type ="checkbox" v-model="checked"> 일 경우 
v-model 디렉티브를 이용해 뷰 인스턴스 data property의 name,checked에 바인딩 했다.
checkbox check를 할 경우 뷰 인스턴스의 checked값이 true로 변경되고, 요소 또한 결과가 반영됨을 알 수 있다.

 

4) v-on

버튼 눌렀을 때 click 이벤트, input 입력 시 자동 유효성 검사 등 이벤트 처리할 때 v-on 디렉티브를 이용한다.

exepression : <div v-on:eventName = "count++"></div> // 직접 data property 접근한다.
eventName : <div @eventName ="methodName"></div> //함수 이름 혹은 입력된 paraemeter를 이용해 이벤트 처리이며 @eventName은 v-on의 단축형태이다. 

 

5) bubbling, capture, target

이벤트 버블링 : 이벤트를 발생시킨 대상 엘리먼트로 시작해서 부모와 조상, 엘리먼트 형태로 클릭 전파

<div id ="middle" v-on:click.stop="handleClickEvent"></div>
계층이 app-outer-middle 일 경우, middle에 stop 수식어가 있으므로, outer에 이벤트 값이 전달되지 않는다.

이벤트 캡쳐링 : 부모 요소부터 시작해 이벤트가 발생한 대상까지 진행하는 것

ex:) 이벤트 캡쳐링을 허용하기 위해서는 capture 옵션을 true로 바꿔야한다.

target : 이벤트가 발생하는 대상만 반응

once : 이벤트가 한번만 발생하게 할 경우 사용한다.

prevent=> 이벤트 발생 시 기본적으로 하는 동작을 중지할 수 있다.

ex:) form태그 안 submit 통해 서버로 데이트 전송하는 등 기본동작을 중지할 수 있다.