본문 바로가기
  • 일하면서 배운 내용 끄적이는 블로그

Vue6

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.
emit으로 자식 -> 부모 데이터 전달 Vue에서 emit은 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 방법이다 예시 자식컴포넌트 자식 컴포넌트 메시지 전송  부모 컴포넌트 부모 컴포넌트 부모 컴포넌트에서 받은 메시지: {{ messageFromChild }}  자식컴포넌트에서 this.$emit("이름", 데이터); 으로 데이터를 넘기면 부모 컴포넌트에서  로 받는 방식 다음은 한번에 여러개의 데이터를 옮기는 방법이다 자식 컴포넌트 자식 컴포넌트 데이터 전송  부모 컴포넌트 부모 컴포넌트 부모 컴포넌트에서 받은 메시지: {{ messageFromChild }} 부모 컴포넌트에서 받은 숫자: {{ numberFromChild }} 2024. 5. 3.
Vue 프로젝트 동작 순서 1. package.json설정파일이다Spring의 pom.xml과 유사하다2. index.html기본적인 html파일App.vue가 들어갈 장소를 명시해놓는 뼈대보통 수정x  이부분이 App.vue가 들어가는 장소3. main.jsApp.vue의 템플릿 내의 을 마운트 한다.여기서 import한 파일들은 나머지 뷰에서 잘 동작한다.import Vue from 'vue'import App from '~/App'import router from '~/router';import axios from 'axios';import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';import 'bootstrap/dist/css/bootstrap.css';i.. 2024. 5. 2.
Props vs EventBus vs Vuex PropsVue.js에서는 부모 - 자식 컴포넌트 사이에 단방향 바인딩을 생성한다.Vue는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할수 없다 따라서 부모는 Props를 통해 자식에게 데이터를 전달하고, 자식은 events(emit)을 통해 부모에게 전달한다. 예제코드 부모  자식 {{ message }}  이런 방식으로 데이터를 전달하는것은 규모가 크고 복잡해질수록 컴포넌트 간 통신 및 데이터 전달이 힘들다 그래서 다음 방법이 EventBus와 Vuex이다.EventBusEventBus는 쉽게 말하면 비어있는 Vue 인스턴스 객체이다.import Vue from "vue";var EventBus = new Vue(); 이 인스턴스를 독립적인 각 컴포.. 2024. 5. 2.
Vue 객체의 속성 및 라이프사이클 정리 Vue 객체의 속성vue 객체의 속성으로는 el, data, template, props, methods, computed, watch 및 라이프사이클 훅들이 있다elVue가 실행되는 html DOM 요소를 지정함. CSS 선택자를 사용한다 (id면 #, class면 .)dataVue 인스턴스가 관리하는 데이터, Reactivity 반영(data를 변경하면 화면 자동 반영)template화면에 표시할 요소(html, css)props부모 컴포넌트의 데이터를 받을 수 있는 속성의 리스트([ ])methods화면의 동작 및 이벤트 로직을 제어하는 메소드computed데이터 표현을 더 직관적이고 간결하게 도와주는 속성으로, 종속 대상에 따라 캐싱, Validation처리, 간단한 연산등에 적합watchdata.. 2024. 5. 2.

티스토리툴바