728x90 반응형 전체 글295 Vue.js] 19. Single-File Components Vue Single-File Components (*.vue 파일)은 컴포넌트의 템플릿, 로직, 스타일을 하나의 파일로 묶은 형태의 파일이다. {{ greeting }}SFC는 Vue를 프레임워크로 정의하며, 다음과 같이 Vue를 사용하는 데 권장되는 접근 방식입니다.싱글 페이지 앱(Single Page Application: SPA)정적 사이트 생성(Static-Site Generator: SSG)더 나은 개발 경험(DX)을 위해 프론트엔드 개발 방식에 합리적으로 빌드 방식 도입 일부 개발자는 전통적인 웹 개발 시, 본래 사용 목적의 성격에 따라 파일 타입이 분리되었던 HTML/CSS/JS를 SFC가 다시 한 곳에 혼합한다는 우려를 가질 수 있습니다!이 우려에 대한 대답은 "관심사항의 분리가 파일 .. 2025. 1. 3. Vue.js] 18. Built-in Components > Transition, KeepAlive Vue는 상태 변화에 대응하기 위해 두가지 내장 컴포넌트를 제공한다. Transition : element 또는 component가 DOM에 들어오고 나갈 때 애니메이션을 적용하기 위함TransitionGroup : element 또는 component가 v-for 리스트에 삽입, 제거 또는 이동할 때 애니메이션을 적용하기 위함이 두 가지 컴포넌트 외에도 CSS 클래스 트랜지션 또는 스타일 바인딩을 통한 상태 기반 애니메이션과 같은 기술을 사용할 수 있다. 컴포넌트토글 안녕/* 이 클래스들이 무엇을 하는지 다음에 설명하겠습니다. */.v-enter-active,.v-leave-active { transition: opacity 0.5s ease;}.v-enter-from,.v-leave-to { .. 2025. 1. 3. Vue.js] 17. Component > Async Components 필요할 때만 서버에서 컴포넌트를 로드해야 할 수 있다. 이를 구현하기 위해 defuneAsyncComponent 함수를 제공한다. import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() => { return new Promise((resolve, reject) => { // ...서버에서 컴포넌트를 로드하는 로직 resolve(/* 로드 된 컴포넌트 */) })})// ... 일반 컴포넌트처럼 `AsyncComp`를 사용rosolve 콜백을 호출해 서버에서 가져온 정의되어 있는 컴포넌트를 반환한다. 로드가 실패했음을 나타내기 위해 reject(reason)을 호출할 수도 있다. import { .. 2025. 1. 2. Vue.js] 16. Component > Provide / Inject 일반적으로 부모에서 자식 컴포넌트로 데이터를 전달할 때 prop을 사용한다. 그러나 깊이 중첩된 경우 먼 조상 컴포넌트의 데이터가 필요한 경우 props만 있으면, 전체 부모 체인에 동일한 prop을 전달해야 한다. Footer 컴포넌트는 해당 prop이 필요하지 않지만, DeepChild가 필요할 수 있다. 하위 트리의 모든 컴포넌트는 깊이에 상관없이 상위 체인의 컴포넌트에서 제공하는 의존성을 주입할 수 있다. Provide컴포넌트의 하위 항목에 데이터를 제공하려면 provide 옵션을 사용한다. export default { provide: { message: '안녕!' }}App-level Provideimport { createApp } from 'vue'const app = create.. 2024. 12. 31. Vue.js] 15. Component > Slots 컴포넌트의 props는 모든 유형의 JavaScript값을 받을 수 있다. 그렇다면, 템플릿 content는 어떨까? template fragment를 자식 component에 전달해서 자식 component가 fragment를 렌더링하길 원할 수 있다. 클릭하기! 클릭하기! 여러 엘리먼트를 전달할 수도 있다. 클릭하기! 대체 컨텐츠 제출 제출Named Slots 다음과 같이 단축 문법을 사용할 수 있다. 다음은 페이지 제목일 수 있습니다. 주요 내용에 대한 단락입니다. 그리고 또 하나. 다음은 연락처 정보입니다. Conditional Slots 2024. 12. 31. Vue.js] 14. Component > v-model, Fallthrough 속성 v-model을 컴포넌트에서 사용하여 양방향 바인딩을 구현할 수 있다. 컴포넌트에 사용하면 다음과 같이 확장된다. searchText = newValue"/>이 기능이 작동하려면 CustomInput 컴포넌트에 두 가지 작업을 해야한다. 1) 네이티브 앨리먼트의 value 속성을 modelValue 프로퍼티에 바인딩합니다.2) 네이티브 input 이벤트가 트리거되면 새 값으로 update:modelValue 사용자 지정 이벤트를 내보냅니다. 또 다른 방법은 computed 프로퍼티를 사용하는 것이다. v-model argumentsv-model은 컴포넌트에서 인수를 받을 수도 있다. Multiple v-model bindings v-model modifiers 속성 상속fallthrough .. 2024. 12. 31. 이전 1 2 3 4 ··· 50 다음 728x90 반응형
