[Vue.js 시작하기] 1. Vue.js 시작하기 & 인스턴스

01. Vue.js 소개

MVVM 페턴

• Model, View, ViewModel
• View → 브라우저에서 사용자에게 비춰지는 화면
• ViewModel → Dom Listeners, Data Bindings
• Model → JS 데이터

Vue

• ViewModel 레이어에 해당하는 화면(View)단 라이브러리

Object.defineProperty()

• 객체의 동작을 재정의하는 API

Object.defineProperty(대상 객체, 객체의 속성{
    //...
});

Reactivity

var div = document.querySelector("#app");
var viewModel = {};

Object.defineProperty(viewModel, "str", {
  // 속성에 접근했을 떄에 동작을 정의
  get: function () {
    console.log("접근");
  },
  // 속성에 값을 할당했을 떄의 속성을 정의
  set: function (newValue) {
    console.log("할당");
    div.innerHTML = newValue;
  },
});

• vue의 핵심인 reactivity(반응성)
• 계속해서 재 할당 div.innerHtml = ‘new Value’ 를 해주지 않아도 자동으로 할당 및 랜더링 가능

즉시 실행 함수 형식으로 변환

(function () {
  function init() {
    Object.defineProperty(viewModel, "str", {
      // 속성에 접근했을 떄에 동작을 정의
      get: function () {
        console.log("접근");
      },
      // 속성에 값을 할당했을 떄의 속성을 정의
      set: function (newValue) {
        console.log("할당");
        render(newValue);
      },
    });
  }

  function render(value) {
    div.innerHTML = value;
  }

  init();
})();

• 해당 형식으로 변환하면 실행하고 호출하지 않아도 즉시 실행
• 대부분의 라이브러리가 해당 형식으로 변수 유효범위 관리

Vue 개발자 도구

• 맨 첫번째 메뉴인 component에서 기본적인 component 구조, data 확인 가능
  
  

02. 인스턴스

Vue Instance

• vue로 개발할 때 필수로 생성해야 하는 코드 또는 단위
• new Vue(); 로 생성
• 변수 안에 인스턴스의 내용을 담을 수 있다. var vm = new Vue();

→ var vm = new Vue();로 생성했을 때 Vue의 여러 인스턴스들을 확인 가능

→ 즉 Vue();는 개발하기 쉽게 어떠한 기능(API)들과 속성들을 제공하고 있음을 알 수 있다.

인스턴스 속성과 API

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});
// key value 형태

• el : 인스턴스가 그려지는 화면의 시작점(특정 HTML 태그)
• template: 화면에 표시할 요소(HTML, CSS 등)
• data: 뷰의 반응성(Reactivity)가 반영된 데이터 속성
• methods: 화면의 동작과 이벤트 로직을 제어하는 메서드
• created: 뷰의 라이프 사이클과 관련된 속성
• watch: data에서 정의한 속성이 변화했을 떄 추가 동작을 수행할 수 있게 정의하는 속성