하빈H

뷰 라우터란? 뷰 라이브러리를 이용하여 싱글 페이지 어플리케이션을 구현할 때 사용하는 라이브러리 뷰 라우터 설치 프로젝트에 뷰 라우터를 설치하는 방법은 CDN 방식과 NPM 방식이 있다. 그 중 CDN 방식으로 설치한 예제는 아래와 같다. 해당 소스를 Open with Live Server로 실행시켜 보면 Vue 인스턴스에 VueRouter가 잘 주입이 된 걸 확인할 수 있다. ($route)

같은 컴포넌트 레벨 간 통신 같은 컴포넌트 레벨 간 데이터를 전달하기 위해서는 상위 컴포넌트를 통해야한다. 아래 그림과 같이 appContent라는 하위 컴포넌트에서 appHeader라는 하위 컴포넌트로 데이터를 전달하려면 appContent에서 Root로 Event를 발생시키고 Root에서 Props 속성을 내려주는 방식으로 구현하면 된다. 예시 appContent에서 Event로 10을 전달해주면 Root의 num 속성에 세팅하고, 이를 propsdata라는 Props 속성으로 appHeader에 데이터를 전달해주었다.

컴포넌트 통신 방식 프롭스(Props) 속성 : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려줌 이벤트(Event) 발생 : 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 올려줌 Props 예시 상위 컴포넌트의 data가 바뀔 경우 하위 컴포넌트의 props도 바뀐 데이터가 반영된다.(Reactivity) 프롭스 속성 이름(아래 예시에서 'propsdata')는 여러 객체에서 동일하게 작성해도 구분이 된다. Event 예시

Vue란? MVVM((model-view-viewmodel) 패턴의 뷰모델(viewmodel) 레이어에 해당하는 화면 단 라이브러리이다. 뷰 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다. 뷰 인스턴스 생성 예시 아래와 같이 코드를 작성하고 VS Code의 Open With Live Server 활용해서 띄운 후 개발자도구로 열어보면 데이터 메시지가 잘 뜬 것을 확인할 수 있다. 인스턴스 속성 el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그) template : 화면에 표시할 요소 (HTML, CSS 등) data : 뷰의 반응성(Reactivity)가 반영된 데이터 속성 methods : 화면의 동작과 이벤트 로직을 제어하는 메소드 created : 뷰의 라이프 사이..

1. Chrome https://www.google.com/intl/ko/chrome/ Chrome 웹브라우저 더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게. www.google.com 2. Visual Studio Code https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform ..