Web/Front

Vue 정리 💚

delayU 2022. 11. 6. 21:58
728x90

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
        • 입력이 끝날 때까지 데이터에 바인딩 하지않고 입력이 완료되면 바인딩