250x250
Notice
Recent Posts
Recent Comments
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags
more
Archives
Today
Total
관리 메뉴

진스

vue 2. 산출 속성 /와치 감시/DOM 조작 nextTick 본문

Vue

vue 2. 산출 속성 /와치 감시/DOM 조작 nextTick

입방정 2021. 4. 28. 15:16
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
Comments