Vue5 디렉티브(Directives) 디렉티브란디렉티브는 v- 접두사가 있는 특수 속성컴포넌트에게 작동을 지시하는 지시문의 역할디렉티브의 종류종류가 다양한데 자주 사용되는 일부만 알아보면 v-text요소의 textContent를 업데이트 한다 new Vue({ el: '#app', data: { message: '안녕하세요!' }})v-bind요소의 속성을 동적으로 바인딩하는데 사용.예를 들어, HTML 요소의 href, class, style 등을 동적으로 설정할 수 있음. 링크 new Vue({ el: '#app', data: { url: 'https://www.example.com' }}) 또한 값을 동적으로 설정할수도 있는데 이런 방식으로 사용 시 isActive가 true이면 active.. 2024. 5. 8. emit으로 자식 -> 부모 데이터 전달 전달 방식이 헷갈려서 따로 정리함 부모 전송 emit 이용해서 this.$emit('데이터명', 데이터); 방식으로 부모로 넘겨주고 자식 부모 컴포넌트에서 받은 데이터: {{ receivedData }} 자식 컴포넌트 에서는 @'데이터명'="부모의 함수명" 해서 받음 그럼 부모의 함수쪽에서 패러미터로 해당 데이터 받을 수 있음그럼 그걸로 this.부모쪽 데이터 = 패러미터; 해서 받기 넘겨주는 데이터가 여러개인 경우에는 부모 전송 여전히 데이터명은 하나인 상태로this.$emit('데이터명', 데이터1, 데이터2); 해서 넘기고 자식 부모 컴포넌트에서 받은 데이터: {{ receivedData }} 이렇게 패러미터 부분을 data1, data2 해서 받아도 되고.. 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 객체의 기본 속성 정리 var vm = new Vue({ //여기 정의}); Vue 객체의 기본 속성들에 대해 정리해본다.elVue 인스턴스가 마운트될 요소를 가르킴예)new Vue({ el: '#app', components: { App }, template: ''}) el: '#app'는 Vue 인스턴스를 #app 요소에 마운트함nameVue 컴포넌트의 이름을 나타냄해당 컴포넌트를 다른곳에서 참조하거나 재사용할 때 유용함 'App'이라는 컴포넌트의 이름을 나타냄 name 활용 예)router.replace({name : 'main'}); 이런식으로 페이지 이동dataVue 인스턴스에서 사용할 데이터를 정의예)data() { return { count: 0 };} Vue에서는 데이터는 함수 형.. 2024. 5. 2. 이전 1 다음
