Vue

• 사용자 인터페이스를 구축하기 위한 javascript 프레임 워크
• 표준 HTML, CSS 및 JavaScript 기반으로 구축

MVVM 패턴

• model
• view : html과 css로 작성
• viewModel : view의 실제 작동하는 논리 및 데이터 흐름 제어
  -> 어플리케이션 로직과 UI를 분리하기 위해 설계된 패턴
  

가상 DOM

• 빠른 UI 랜더링
• 변경된 부분을 탐지하는 것이 목적
  - 브라우저 돔 : 화면에 그리는 작업 수행
  - 가상 돔 : 변경된 부분을 탐지하기 위해 사용
  

보간법

{{}} 중괄호를 사용하여 데이터를 HTML에 삽입하는 방법

디렉티브

• v-로 시작하는 속성
• DOM을 반응형으로 조작할 수 있도록 도와줌

v-text, v-html

v-text

요소의 textContent를 갱신

• 예: <p v-text="message"></p>

v-html

요소의 innerHTML을 갱신하여 HTML 태그를 렌더링합니다.

• 예: <div v-html="htmlContent"></div>

v-bind

• HTML 요소의 속성과 Vue의 데이터를 연결
• 데이터가 변경되면 연결된 HTML 속성도 자동으로 업데이트 (단방향)
• 사용법
  • 기본 형식: v-bind:속성명="데이터”
  • 축약 형식: :속성명="데이터”

1. 기본 속성 바인딩 : <img :src="변수명" :alt="message" />
2. 링크 주소 바인딩 : <a :href="링크주소 변수명" target="_blank">네이버이동</a>
3. class와 스타일 바인딩 : <div :class="[activeClass, errClass]">내용</div>
4. 인라인 스타일 바인딩 : <div :style="{color: color1,fontSize:fontSize+'px'} ">content44</div>
5. 폼 요소의 속성 바인딩 : <input :type="inputType" :placeholder="placeholderText" :required="isrequired" />
6. select 요소의 바인딩 :

		<select :value="selected">
          <option
            v-for="option in options"
            :value="option.value"
            :key="option.id"
          >
            {{option.text}}
          </option>
        </select>

v-model

• 폼 입력 요소와 Vue의 데이터를 양방향으로 바인딩해주는 디렉티브
• 사용자 입력에 따라 데이터가 자동으로 업데이트되고, 데이터 변경 시 입력 요소도 업데이트됨
• 사용법
  • 기본 형식: v-model="데이터"
• 주요 사용 사례
  • 텍스트 입력: <input type="text" v-model="메시지변수">
  • 체크박스: <input type="checkbox" v-model="체크상태변수">
  • 라디오 버튼: <input type="radio" v-model="선택변수">
  • 셀렉트 박스: <select v-model="선택변수">
  • 텍스트 영역: <textarea v-model="내용변수"></textarea>
• 한글 처리 문제점
  • v-bind + 이벤트 헨들러 사용

modifier

• .lazy
  • change 이벤트 발생시에만 데이터 업데이트를 함
• .number
  • 사용자 입력을 자동으로 숫자로 형변환 해줌, 숫자로 변환 가능할때만
• .trim
  • 입력값의 앞뒤 공백을 자동으로 제거

조건 렌더링

v-show

• 조건이 거짓이면 요소가 dom에는 남아있지만 display 속성(none)으로 안보이게함.
• 햄버거 바 같이 생겼다가 없어지는 것 구현할 때 자주 사용
• dom에 남겨 렌더링 낭비를 줄이기 위해 사용

v-if, v-else-if, v-else

• 조건부 렌더링을 할 때 사용
• 블록으로 렌더링
• 조건이 false 이면 요소가 dom에서 완전히 제거된다.
• 돔 처음 그릴 때, 안 그려져서 빨라짐 → 빠르게 가져올 수 있음
• true false 를 이용해서 변수만 사용 가능

반복 렌더링

v-for

• 디렉티브를 사용한 렌더링
• 배열이나 객체의 각 항목에 대해 요소를 반복 설정
• :key 속성을 통해 각 항목에 고유한 식별자 부여
  • vue의 가상 dom에 최적화 위해 (전체 렌더링을 피하기 위해)

v-for arr

• v-for="(item,index) in arr"
  • item : 배열의 요소
  • index : 배열의 인덱스 → 배열 자체에 존재하는 인덱스
  • in을 이용해 배열 안 값 하나씩 가져옴

v-for object

• v-for="(value, key, index) in object"
  • value : 객체의 속성 값
  • key : 객체의 속성 (속성 이름)
  • index : 인덱스 -> 객체 자체에는 인덱스가 없지만 Vue에서 인덱스를 부여

v-once

• 초기 랜더링 이후 데이터가 변경되어도 랜더링 되지 않음
• 성능 최적화를 위해 사용
• 변경되지 않는 정적 콘텐츠에 사용하면 불필요한 재렌더링을 방지
• 한 번만 렌더링되고 이후 업데이트되지 않음
• 자식 컴포넌트에도 영향을 미침 (하위 모든 바인딩에 적용)