[vue.js] vue.js 코딩공작소 책 요약

간단한 Vue 튜토리얼을 마무리 지으면서 앞서 배웠었던 내용을 빠르게 다시한번 정리할 시간이 필요하다는것을 느꼈다. 이번에는 코드레벨이 아닌 좀 더 이론적인 부분을 살펴보도록 하자.

1. vue.js를 시작하기 앞서서

- 모델-뷰-뷰모델 패턴: 정제된 MVC모습인 MVVM 패턴의 가장 큰 차이점은 뷰 모델 도입과 데이터바인딩(바인더)에 있다. 
- 뷰-모델에서 데이터가 변하면 데이터에 연결된 뷰는 자동으로 업데이터된다. 데이터바인더를 데이터에 노출시키고 데이터가 변할때마다 뷰에 반영될 수 있도록 보증한다

---

2. Vue 인스턴스

모든 Vue 애플리케이션에는 루트 Vue 인스턴스가 있다. 루트 Vue인스턴스는 뷰 생성자인 new Vue()로 생성할 수 있다. 
* 생성자는 HTML서식을 컴파일하고, 인스턴스 데이터를 초기화하고, 데이터를 생성하고, 애플리케이션을 상호 작용형으로 만들어주는 이벤트들을 바인딩하면서 애플리케이션을 가동시킨다.
* el옵션: Vue가 애플리케이션을 적용할 DOM요소(element를 의미하는듯)를 지정한다. Vue는 HTML에서 해당 DOM요소를찾아 해당 element(DOM요소) 를 적용 지점으로 사용하한다.
* Vue debugging : vue-devtools를 설치하자. console에서 webstore를 입력하여 Vue객체의 속성값들을 확인할 수 있다.

Vue 생명주기

1. 인스턴스 생성: 데이터 관찰자를 생성하고 내부 이벤트 시스템에서 사용될 이벤트를 생성하여 초기화한다.
2. 템플릿과 가상 DOM생성: Vue가 템플릿 혹은 렌더링 함수를 찾아 템플릿을 컴파일한다. 가상 DOM 복사본을 만들고, 그 결과를 HTML DOM에 마운트한다.
3. 이벤트 루프: 관찰자는 뷰-모델의 데이터를 감시한다. 변화가 있으면 가상 DOM이 다시 렌더링되어 HTML DOM에 적용된다.
4. 인스턴스 소멸: 앱이 소멸되기 시작하면 완전히 소멸되기 전에 모든 관찰자, 이벤트 리스너, 자식 컴포넌트들이 삭제된다.

Vue 생명주기 hook 살펴보기

애플리케이션 인스턴스가 생명 주기의 각 과정을 거치는 것을 보려면 Vue 생명 주기 훅에 콜백 함수를 작성한다.
생명 주기 훅은 애프리케이션이 실행되면서 일어나는 일들을 살펴보기에 좋은 방법을 제공한다. 디버깅할때 사용하자.

지시문

1. text 노드에 데이터 맵핑. v-text 혹은 {{ }}

    var app = new Vue({
      el: '#vue-app',
      data: {
        contents: 'hello world!'
      }
    })
    <div id="vue-app">
      <h1 v-text="contents"> </h1>
      <h1>{{ contents }} </h1>
    </div>
   

   결과:

   hello world

   hello world

   출력 필터 적용

   출력필터는 값을받아 형식화를 수행하고 형식화된 값을 출력하는 함수이다
   모든 출력 필터는 Vue 인스턴스 > filters객체에 존재한다.

    <div id="vue-app">
    <h1 v-for="member in members">{{ member | memberFilter }} </h1>
    </div>
   
    var app = new Vue({
    el: '#vue-app',
    data: {
    members: [
        'sohee', 'sohyun', '소희', '소현']
    },
    filters: {
     memberFilter(name){
        if(name && /^[a-z]*$/.test(name)){
              return "Welcome! " + name;
        }else if(name && /^[가-힣]*$/.test(name)){
              return "반가워요! " + name;
        }else{
          return "hello stranger" + "name";
        }
     }
    }
    })

   결과:

   Welcome! sohee

   Welcome! sohyun

   반가워요! 소희

   반가워요! 소현

---

3.상호작용성

DOM 이벤트에 바인딩

이벤트 바인딩 기초 : 이벤트 바인딩은 v-on지시자를 사용해서 자바스크립트 코드나 함수를 DOM요소에 연결합니다.
해당 코드나 함수는 DOM 이벤트가 트리거 될 때 실행됩니다.

    <p v-on:eventname="some javascript"</p>
    v-on지시자를 간략하게 사용하는 방법은 v-on을 @로 대체하면 된다. 예를들어 v-on:click이라면, @click으로 쓰면 된다.

1. Vue 인스턴스 옵션에 method 객체를 추가하세요.
2. element 안에 v-on 지시자 (혹은 @): eventname="method or javascript code"를 입력하세요

vue.js를 MVVM 모델과 연관지어 생각해보자.

데이터베이스(모델)
firstName = Summer
lastName = river

뷰 인스턴스(뷰-모델)
data: {
  firstName: 'summer',
  lastName = river
}
computed: {
  fullName(){
    return[
      this.firstName,
      this.lastName
    ].join(' ')
  }
}
HTML 마크업(뷰)
<p>{{ fullName }}</p>

계산된 속성

계산된 속성은 보통 인스턴스 데이터를 사용해서 계산되므로 기본 데이터가 변경되면 값이 자동으로 업데이트 된다. 업데이트 주기. 업데이트 주기를 기억하십시오
아래에 억지로 짜낸 예제를 한번 살펴봅시다.

<div id="vue-app">
  <h3 v-text="favorite"></h3>
</div>

var app = new Vue({
  el: '#vue-app',
  data: {
    fav: {
      friend:'토끼',
      hubby:'산책'
    }
  },
  computed: {
    favorite (){
      return '나는' + this.fav.friend + "랑 " + this.fav.hubby + "하는게 제일 좋아"
    }
  }
})

이 예제에서 fav객체는 friend로 토끼를, hubby로 산책을 초기값으로 바뀐다. 이후에 아래와 같은 상황에서만 업데이트 된다.
1) 좋아하는 친구나 취미가 변경되었을때(fav 객체)
2) favorite 함수가 변경되었을때
3) 이 속성에 연결된 마크업이 업데이트 되었을때

인스턴스 데이터 변화에 따른 애플리케이션 업데이트 주기

인스턴스 데이터 -> 데이터 변경 -> 계산된 속성 재계산 -> 가상 DOM 업데이트 -> 웹 브라우저 DOM 패치

---

4.폼과 입력

v-model 지시자는 폼 혹은 텍스트 영역 입력과 템플릿에 양방향 데이터 바인딩을 생성한다. 이를통해 애플리케이션 모델의 데이터가 UI와 항상 동기화 할 수있다.
예를들어서. 인스턴스의 data를 DOM에 반영할수도 있지만, 사용자가 DOM의 데이터를 변경할 수도 있다 이때 v-model을 사용하여 사용자가 입력한 data를 인스턴스의
data에 반영할 수 있다.

v-once 지시자는 하나의 요소나 컴포넌트를 딱 한번 렌더링 한다. 추가적으로 렌더링 할 때는 이미 만든 요소나 컴포넌트를 정적인 콘텐츠로 인식하여 건너뛴다.

v-model 지시자는 텍스트 박스, 텍스트 영역, 체크 박스, 라디오 버튼, 셀렉트 드롭다운을 포함하는 여러 종류의 폼 입력을 위해 만들었다.  

양방향 데이터 바인딩

 뷰의 변화는 모델을 업데이트 한다.
 모델의 변화는 뷰를 업데이트 한다.

v-model 바인딩 사용

v-model 지시자를 사용해서 폼 입력을 계속 주시해보자.
v-model은 주로 입력과 폼 바인딩에 사용된다. 반면 v-bind는 주로 HTML속성 바인딩에 사용된다.
v-model 지시자는 사실 <input v-bind:"sohething" v-on:input="something=$.event.target">의 약어임ㅇㅇ

v-model을 간단하게 써보자..

<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>

<body>
<div id="vue-app">
  이름: <input v-model="memberInfo.name"/> <br>
  나이: <input v-model="memberInfo.age"/> <br>
  취미: <input v-model="memberInfo.hubby"/> <br>
  주말엔 무엇을 하는게 좋아?
  <input type="radio" id="rest" value="rest" v-model="memberInfo.weekend"/>
  <label for="rest">집에서 쉰다.</label>
  <input type="radio" id="friend" value="friend" v-model="memberInfo.weekend"/>
  <label for="rest">친구를 만난다.</label> <br>
  제출: <button type="submit" v-on:click="submit">보내기</button>
  </div>
</body>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</html>

var app = new Vue({
  el: '#vue-app',
  data: {
    memberInfo: {
      name:'',
      age:0,
      hubby:'',
      weekend:'',
    }
  },
  computed: {
    greet(){
      return "안녕 " + this.memberInfo.name + "(" + this.memberInfo.age + ")" +
        "너의 취미는 " + this.memberInfo.hubby + "구나. 만나서 반가워!" +
        "주말엔 주로" + (this.memberInfo.weekend == 'home' ? "집에있는구나" : "친구를만나는구나");
    }
  },
  methods: {
    submit(){
      alert(this.greet);
    }
  }
})