Vue10 Slot Slot은 컴포넌트의 재사용성을 높여주는 기능이다.부모 컴포넌트에서 자식 컴포넌트에 들어갈 콘텐츠를 동적으로 선언할 수 있다. 기본 Slot자식 컴포넌트 부모 컴포넌트 이 내용은 자식 컴포넌트에 삽입됩니다. Vue 2에서 slot을 사용하여 컴포넌트 간에 유연하게 데이터를 전달하고, 동적으로 내용을 삽입할 수 있다.Named Slotnamed slot 은 여러 개의 슬롯을 구분하고, 각각의 슬롯에 다른 콘텐츠를 전달할 수 있게 함자식 컴포넌트에서 슬롯을 정의할 때 name 속성을 사용 자식 컴포넌트 부모 컴포넌트 헤더 콘텐츠 .. 2024. 7. 8. 디렉티브(Directives) 디렉티브란디렉티브는 v- 접두사가 있는 특수 속성컴포넌트에게 작동을 지시하는 지시문의 역할디렉티브의 종류종류가 다양한데 자주 사용되는 일부만 알아보면 v-text요소의 textContent를 업데이트 한다 v-bind요소의 속성을 동적으로 바인딩하는데 사용.예를 들어, HTML 요소의 href, class, style 등을 동적으로 설정할 수 있음. 링크 또한 값을 동적으로 설정할수도 있는데 이런 방식으로 사용 시 isActive가 true이면 active 클래스가 적용되고, false면 제거아래는 true면 active 클래스가 적용되고 false면 active2 클래스가 적용되는 코드v-model폼 입력 요소와 애플리케이션 데이터를 양방향으로 바인딩 한다.입력 요소의 값이 변.. 2024. 5. 8. Router push, replace, go 라우터에서는 를 통해 a 태그를 사용한 페이지 전환이 가능한데이외에도 $router 객체의 push, replace, go 메소드를 통해 페이지 전환이 가능하다 push, replace go의 차이는 다음과 같다PUSHmethods: { gotoHome() { this.$router.push('/home'); }, gotoAbout() { this.$router.push('/about'); }} push는 해당 url로 이동하는 메소드인데이전 경로를 히스토리 스택에 저장하기 때문에 이동 후 뒤로가기 버튼을 통해 원래 페이지로 돌아올 수 있다.REPLACEmethods: { replaceHome() { this.$router.replace('/home'); .. 2024. 5. 8. Vuex로 중앙에서 상태 관리하기 Vuex의 정의Vuex란 Vue.js에서의 상태 관리 라이브러리Vue.js 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할React의 Redux같은것Vuex의 특징Single Source of Truth하나의 어플리케이션은 하나의 store만 가진다하나의 객체가 어플리케이션 전체 state를 포함단일 상태 트리는 특정 state를 바로 찾을 수 있게 만들고, 현재 앱의 state의 스냅샷을 가져올 수 있어 디버깅 편리 State is Reactive상태가 변경되면 이 상태를 공유하는 다른 곳에서도 상태가 업데이트 됨 State management pattern + LibraryVuex는 상태관리 패턴이자 라이브러리여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴을 Vu.. 2024. 5. 7. Vue 프로젝트 경로의 @ import store from '@/src/main.js' 이런식으로 경로에 @ 가 들어가있는 경우를 볼수있는데 이는 Vue 프로젝트에서 쓰이는 alias다. 프로젝트의 루트를 가르킨다. 즉 위의 경로는 프로젝트의 루트에 있는 src파일 하위의 main.js를 가르키는것 2024. 5. 7. emit으로 자식 -> 부모 데이터 전달 Vue에서 emit은 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 방법이다 예시 자식컴포넌트 자식 컴포넌트 메시지 전송 부모 컴포넌트 부모 컴포넌트 부모 컴포넌트에서 받은 메시지: {{ messageFromChild }} 자식컴포넌트에서 this.$emit("이름", 데이터); 으로 데이터를 넘기면 부모 컴포넌트에서 로 받는 방식 다음은 한번에 여러개의 데이터를 옮기는 방법이다 자식 컴포넌트 자식 컴포넌트 데이터 전송 부모 컴포넌트 부모 컴포넌트 부모 컴포넌트에서 받은 메시지: {{ messageFromChild }} 부모 컴포넌트에서 받은 숫자: {{ numberFromChild }} 2024. 5. 3. 이전 1 2 다음
