Kkongchii_Log

Vue Template Vue의 Template 문법이란, Vue로 화면을 조작하는 방법을 의미합니다. Template 문법은 크게 1. Data Binding, 2.Directive 으로 나뉩니다. Data Binding : Vue Instance에서 정의한 속성들을 화면에 표시하는 방법입니다. Instance의 속성을 연결할 수 있습니다. 기본 구조 : {{data}} Directive : Vue로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 Directive 형태로 제공하고 있습니다. 기본 구조 : v- (ex. v-bind, v-if, v-else, v-show, v-on, v-model 등) !-- seen의 진위 값에 따라 p 태그가 화면에 표시..

Component 통신 방식 - 부모 / 자식 레벨 Vue Component는 각각 고유한 데이터 유효 범위를 갖습니다. 따라서 Component 간에 데이터를 주고 받기 위해서는 아래와 같은 규칙을 따라야 합니다. 자식 Component → 부모 Component : Event 발생 부모 Component → 자식 Component : Props 전달 즉, 자식 Component는 부모 Component에게 Event를 발생시켜 올려줌으로써, 부모 Component는 자식 Component에게 props 속성을 통해 데이터를 전달하게 됩니다. Props 부모 Component → 자식 Component Props를 이용한 예제는 아래와 같습니다. 위의 예제를 쪼개어 본다면 아래와 같습니다. 1. 부모 ..

Vue Vue는 무엇일까요? Vue.js는 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크이자, MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 입니다. MVVM 패턴 MVVM 패턴은 'Model + View + ViewModel' 을 의미하는 아키텍처 패턴으로, View의 개발을 비즈니스 로직 또는 백엔드 로직(Model)과 Client의 데이터 표현단을 분리하기 위한 구조입니다. 즉, 화면 동작과 관련 로직과 DB 데이터 처리 및 백엔드 로직을 분리하여, 데이터를 Model에 담아 View로 넘겨주는 중간지점으로 ViewModel이 이용되게 됩니다. Vue Instance Instance는 뷰로 개발할 때 필수로 생성해야 ..