Vue 정리 💚

Vue

Vue란?

웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크

Vue 주요 속성

• el
  • Vue 인스턴스를 바인딩할 DOM 요소 지정
• data
  • 뷰에서 관리할 자바스크립트 객체
  • DOM요소와 바인딩 될 데이터
• template 속성
  • 작성하지 않은 경우
    • el에 지정된 DOM 요소를 template으로 사용
  • 작성한 경우
    • el에 지정된 DOM을 template에 작성한 요소로 대체

Vue 라이프 사이클

1. Create
   • 뷰 인스턴스에 data속성, methods 속성을 정의
   1. beforeCreate
   2. created(중요)
      • data 속성, methods 속성에 접근 가능
      • 뷰 인스턴스가 화면에 부착되기 전(mount)
      • 서버로부터 데이터를 요청하기 적합
2. Mount
   • DOM에 뷰 인스턴스를 부착
   1. beforeMount
   2. mounted
      • this.$el을 통해 바인딩 된 화면 요소에 접근이 가능
        • 화면 요소를 직접 제어하기 적합
3. Update
   • DOM과 바인딩 된 데이터가 변경되는 경우 re-render
   1. beforeUpdate
      • 바인딩 된 데이터가 변경된 후 화면이 세로 렌더링되기 전
      • 변경된 데이터에 접근 가능
      • 이 때, 데이터를 변경해도 update가 발생하지 않음
   2. updated
      • 바인딩 된 데이터를 변경할 경우 무한 update 발생하므로 주의
4. Destroy
   • DOM과 바인딩된 걸 해제 및 인스턴스 제거
   1. beforeDestroy
      • 바인딩 해제 및 뷰 인스턴스 제거 전
      • 뷰 인스턴스에 접근 가능
   2. destroy
      • 모든 바인딩 해제 및 뷰 인스턴스 삭제 후
      • 뷰 인스턴스 접근 불가

fetch와 axios 비교

• axios는 기본 Content-Type이 application/json임 → header설정 X
• axios는 요청 데이터를 자동으로 문자열로 변경해서 보냄
• axios는 경우, 상태 코드가 200번이 아니라면 error반환하므로 .catch() or try catch로 처리 가능
• axios의 경우, 응답으로 json데이터를 받아옴

데이터 바인딩

단방향 데이터 바인딩

데이터 변경 시 ⇒ 화면 변경

1. {{}} mustache
2. v-html, v-text
3. v-bind 속성 바인딩
   • v-bind:value=""
     • 단순 문자열이 아닌 js영역, 뷰 인스턴스 속성들 접근 가능
     • ‘abc’ 이렇게 하면 문자열로 사용 가능
   • value="" (생략 가능)
   • v-bind:class=""

양방향 데이터 바인딩

화면 변경 시 ⇒ 데이터 변경

• v-model
  • <input></input>, text area 등에 사용
  • 수식어
    • v-model.number
      • input은 type을 number로 지정해도 value 값을 문자열로 반환
      • 수식어 사용 시 자동으로 숫자 타입으로 변환
    • v-model.trim
      • 앞, 뒤 공백 제거 기능
    • v-model.lazy
      • 입력이 끝날 때까지 데이터에 바인딩 하지않고 입력이 완료되면 바인딩