UX·UI - FrontEnd Dev. Story

프론트엔드/Vue 2

[Vue] 라이프사이클 Mounted 란? 언제 써야할까

🚀 mounted 란?- 컴포넌트가 화면 DOM에 완전 추가된 후 실행하는 함수. 컴포넌트 생성 ▶️ 가상 DOM에 렌더링 ▶️ 브라우저에 화면 그려짐 ▶️ mounted 실행 ✨ HTML이 화면에  그려진 후, 실행되는 함수.보통 데이터를 불러오거나 DOM을 직접 조작해야할 때 사용.     예시 1 ) 화면에 표시된 후 API에서 데이터 가져오기 {{ message }}data() { return { message: "로딩 중...", // 처음엔 data의 message는 "로딩 중..."라고 적용 됨. }; }, mounted() { setTimeout(() => { this.message = "데이터 불러옴!"; }, 2000); // 2초..

프론트엔드/Vue 2025.02.04

[Vue] 컴포넌트 팝업창 '오늘 하루 창 열지 않기' 스크립트 만들기 feat. mounted - 포폴

예전에 쿠키를 이용해서 이 기능이 적용된 팝업을 레거시로 만들었었는데 이번에 Vue에서 사용하는 팝업창을 만들게 되었다. 라이프사이클을 사용해서 하다보니 만들면서 기억할 겸 정리 한다.    [ Vue에서 HTML 팝업창 만들기 적용 ] 오늘 하루 열지않는 팝업창 만들기 닫기 오늘 하루 열지 않기     v-model을 이용하여 데이터 바인딩을 적용. checkbox가 클릭되면,data에 doNotShowToday = ture  checkbox가 해지하면,doNotShowToday = false     [ Vue에서 오늘 열지않기 기능 Script 적용 ] export default { data..

프론트엔드/Vue 2025.02.04
반응형