상위(Parent) 컴포넌트와 하위(Child) 컴포넌트 간에 통신 방식은 props와 event로 구성된다. Props props 속성은 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 속성이다. props 속성 코드 형식 // 하위 컴포넌트 var appHeader = { props: ['프롭스 속성명'] } props 속성 코드 예시
컴포넌트 (Component) 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 Vue의 기능이다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 제작할 수 있다. Vue 인스턴스를 생성하면 개발자 도구에서 root 컴포넌트로 인식한다. 컴포넌트 등록 방법 2 가지 ✨ 전역 컴포넌트 등록 여러 인스턴스에서 공통으로 사용 가능하다 Vue.component('컴포넌트 이름', 컴포넌트 내용) // ... Vue.component('app-header', { template: 'Header Component' }); ✨ 지역 컴포넌트 등록 특정 인스턴스에서만 사용 가능하다. components: { '컴포넌트 이름' : 컴포넌트 내용 } // ... new Vue({ el: '#ap..
인스턴스는 Vue.js로 화면을 개발하기 위해 필수로 생성해야 하는 코드이다. Vue 인스턴스 생성자 인스턴스 안에는 미리 정의되어 있는 속성과 메서드(API)들이 있기 때문에 이 기능들을 이용하여 화면을 개발한다. 인스턴스는 아래와 같이 생성할 수 있다. new Vue ({ // instance option properties }); 인스턴스의 속성, API들 new Vue ({ el: , template: , date: , methods: , created: , watch: , }); el : 인스턴스가 그려지는 특정 HTML 태그 template : 화면에 표시할 요소 (HTML, CSS) data : Vue의 반응성(Reactivity)이 반영된 데이터 속성 methods : 화면의 동작과 이벤트..
Vue.js 란? Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위한 동적 자바스크립트 프레임워크이다. Vue.js의 특징 💡 MVVM 패턴 MVVM (Model-View-ViewModel) 패턴은 화면을 모델-뷰-뷰모델로 구조화하여 개발하는 방식이다. 프론트엔드의 화면동작과 관련된 로직과 백엔드의 데이터베이스 처리로직을 분리하여 깔끔하게 코드를 구성하는 소프트웨어 디자인패턴이다.
