진스
vue 2. 산출 속성 /와치 감시/DOM 조작 nextTick 본문
728x90
참고 사이트
고양이도 할 수 있는 Vue.js
isActive 변경하기 동적 클래스 동적 스타일 ※ 알기 쉽게 .is-active 는 배경색을 변경하게 했습니다.
rintiantta.github.io
산출 속성 사용 방법

산출 속성을 조합해서 사용하기

게터와 세터

산출 속성 캐시 기능


리스트 필터링


See the Pen 리스트 필터링 by 배정민 (@baejm) on CodePen.
정렬 기능 추가하기
현재 샘플 코드에서는 Lodash를 사용하고 있습니다. 실제 운용할 때는 "lodash.min.js"을 사용해주세요.



와치watch 사용 방법


한 번만 동작하는 워처

실행 빈도 제어하기

사용자 정의 디렉티브로 데이터를 감시하면서 DOM 조작하기
사용자 정의 디렉티브 사용 방법

사용할 수 있는 훅

nextTick으로 변경 후의 DOM에 접근하기
Vue가 DOM을 업데이트 된 후의 DOM을 보장하기 위해서는 Vue.nextTick(callback) 을 사용하면 됩니다. 이 callback은 DOM이 업데이트 된 후에 호출 되기 때문에 DOM이 업데이트 된 이후임을 보장할 수 있습니다.


출처: https://beomy.tistory.com/66 [beomy]
nextTick으로 변경 후의 DOM에 접근하기
- 변경 후의 DOM 높이 확인하기

728x90
'Vue' 카테고리의 다른 글
| vue 3. 컴포넌트 통신/slot/양방향 바인딩/mixin (0) | 2021.04.28 |
|---|---|
| 폼 입력값의 V-Model의 수식어 v-model.lazy/v-model.number/v-model.trim (0) | 2021.04.28 |
| vue-router의 다양한 인스턴스 메소드를 사용 (0) | 2021.04.28 |
| vue-tiny-slider (슬라이더)모듈 사용하기 (0) | 2021.04.28 |
| Vue 참고 사이트 (0) | 2021.04.28 |
Comments