[Vue] 클래스와 스타일바인딩 | 렌더링

12230 단어 vuevue

📗 1. 클래스와 스타일 바인딩

클래스와 스타일 바인딩 | Vue.js

  • v-bind:class (v-bind:class의 약자)에 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다.
<div :class="{ active: isActive }"></div>
  • 위 구문은 active 클래스의 존재가 데이터 속성 isActive의 진실성(truthiness)에 의해 결정됨을 의미합니다.
  • key:value형태로 여러개 가능
<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>
  • 바인딩 된 객체는 인라인 일 필요는 없습니다 :
<div :class="classObject"></div>

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}
  • 이것은 동일한 결과를 렌더링합니다. 객체를 반환하는 computed property에 바인딩 할 수도 있습니다. 이것은 일반적으로 강력한 패턴입니다.
data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

배열 구문

  • 배열을 :class에 전달하여 클래스 목록을 적용 할 수 있습니다.
<div :class="[activeClass, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

스타일 바인딩




📗 2. 조건부 렌더링

조건부 렌더링 | Vue.js

v-if

  • true일 때만 화면에 렌더링.
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

template 태그

  • div로 묶어준 것과 다르게 실제 Dom트리에 영향을 미치지 않음.
  • v-if와 같은 조건문을 걸어줄 때 유용
  • 최상위 template에는 적용하면 안됨.

v-show

  • 연결되어져 있는 데이터의 참/거짓에 상관없이 구조적으로 렌더링은 함.
  • 하지만 화면에 출력되지 않기 위해 'display: none'이 적용되어 있음(거짓일때!)

조건부 렌더링 | Vue.js

<h1 v-show="ok">Hello!</h1>
  • 둘의 차이는 v-show를 쓴 엘리먼트의 경우, 항상 렌더링 되어 DOM에 남아있다는 점입니다. v-show는 단순히 엘리먼트의 CSS display 속성만을 전환합니다.
  • v-show는 <template> 엘리먼트를 지원하지 않으며, v-else와 함께 쓸 수 없습니다.

v-if 대 v-show

  • v-if는 "실제(real)" 조건부 렌더링입니다. 전환 도중 조건부 블록 내부의 이벤트 리스너 및 자식 컴포넌트들이 올바르게 제거되고 다시 생성되기 때문입니다.

  • 또한 v-if는 게으릅니다(lazy). 초기 렌더링 시, 조건이 거짓(false)이면 아무 작업도 하지 않습니다. 조건부 블록은 조건이 처음으로 참(true)이 될 때까지 렌더링되지 않습니다.

  • 이에 비해 v-show는 훨씬 간단합니다. 엘리먼트는 CSS 기반 전환으로 초기 조건과 관계 없이 항상 렌더링됩니다.
    (역자 주: v-show는 엘리먼트를 DOM에 우선 렌더링하고 조건에 따라 CSS display:block/display:none 속성을 전환합니다.)

  • 일반적으로 v-if는 전환 비용이 높은 반면, v-show는 초기 렌더링 비용이 높습니다.

  • 그러므로 무언가를 자주 전환해야 한다면 v-show를 사용하는 게 좋고, 런타임 시 조건이 변경되지 않는다면 v-if를 사용하는 게 더 낫습니다.

  • 일단 v-if를 사용하고 전환비용이 많이 들어갈 것(자주 사용할 것) 같으면 v-show로 바꿔주기.!




📗 3. 리스트 렌더링

:key는 고유하게 구별할 수 있는 값으로 설정.

  • shortid 패키지 설치
npm i -D shortid
  • 객체구조분해할당, 화살표함수를 활용해서 코드 간소화.

배열 변경 감지

리스트 렌더링 | Vue.js

변이 메소드

  • push() : 배열 맨 뒤에 값 추가
  • pop() : 배열 맨 뒤에 값 빼기
  • shift() : 배열 맨 앞에 값 추가
  • unshift() : 배열 맨 앞 값 빼기
  • splice() : 인덱스를 이용해서 데이터 넣거나 빼거나
  • sort() : 배열 정렬
  • reverse() : 배열 뒤집기.

콘솔을 열고 변형 메소드를 호출하여 이전의 예제의 items 배열로 사용할 수 있습니다.예: example1.items.push({ message: 'Baz' }).

배열 교체

리스트 렌더링 | Vue.js

이로 인해 Vue가 기존 DOM을 버리고 전체 목록을 다시 렌더링할 것이라고 생각할 수 있습니다. 다행히도 그렇지 않습니다. Vue는 DOM 요소 재사용을 최대화하기 위해 몇 가지 smart heuristics(스마트 휴리스틱, 과학적인 조건보다는 경험이나 직관에 의해 똑똑하게 의사결정을 하는 방식)을 구현하므로, 배열을 겹치는 객체를 포함하는 다른 배열로 교체하는 것은 매우 효율적인 작업입니다.

좋은 웹페이지 즐겨찾기