Front-end12 Vue Router ? 내가 아는 라우터는 네트워크시간에 배웠던 라우터 장치 밖에 없는데.. 근데 희미하게 생각나는게 라우터가 데이터가 가는 경로를 효율적으로 지정해준다 정도로 알고있는데 뷰에서도 경로로 사용될꺼같다는 느낌이 들었다! 그럼 함 살펴보자 뷰 라우터 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. 뷰 라우터 등록 라우터 인스턴스를 하나 생성하고 뷰 인스턴스에 등록~~ // 라우터 인스턴스 생성 var router = new VueRouter({ // 라우터 옵션 }) // 인스턴스에 라우터 인스턴스를 등록 new Vue({ router: router }) 뷰 라우터 옵션 routes : 라우팅 할 URL과 컴포넌트 값 지정 mode : URL의 해쉬 값 제거 속성 var r.. 2020. 1. 2. props / event Emit (2) 컴포넌트 간에 데이터를 주고 받기 위한 규칙을 알아 보았다. 그렇다면 서로 같은 level에 있는 컴포넌트 끼리 데이터를 주고 받기 위해서는 어떤 방식으로 규칙을 지키면서 움직여야 할까? 위에 그림과 같이 같은 level에 존재하는 하위 컴포넌트 끼리 데이터를 주고 받기위해서는 규칙에 맞게 움직이면서 데이터를 전달 해야한다. 즉 상위 컴포넌트로 데이터를 전달(event)하고 그 데이터를 다시 하위 컴포넌트로 보낸다(props)는 규칙을 통해서 전달한다 그 전 포스팅에서도 말했듯이 이러한 규칙을 지키지 않는다면 버그가 발생했을때 추적하기 힘들어지는 문제가 발생한다. 예제 코드 예제에서는 간단하게 root 컴포넌트와 하위 하나씩 컴포넌트의 구조로 하겠습니다. //같은 level의 하위 컴포넌트 var app.. 2019. 12. 30. props / event Emit props -프롭스 속성은 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 입니다. 프롭스 속성을 기억할 때는 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성으로 기억하면 쉽다! 사용 예시 코드 html js //하위 컴포넌트 var appHeader = { template: '{{ propsdata }}', props: ['propsdata'] } //상위 컴포넌트 new Vue({ el : '#app' , components : { 'app-header' : appHeader }, data : { //상위 컴포넌트 데이터 이름 : message message : 'Root message', num : 10 } }); props 흐름 1. 상위 컴포넌트의 data값이 저정된다 2. .. 2019. 12. 29. 컴포넌트 통신 이란 ? 그림에서 보듯이 컴포넌트는 상위 컴포넌트와 하위컴포넌트가 존재한다 뷰 컴포넌트는 각각 고유한 데이터 유호 범위를 갖습니다. 따라서 , 컴포넌트 간에 데이터를 주고 받기 위해선 규칙이 필요합니다!!!! 근데 왜 규칙이 필요한가 그냥 아래로 넘겨주면 될꺼같은데 ... 이러한 데이터 관계가 생긴다면 데이터 변경으로 인한 버그를 추적하기 어렵다는 문제를 가지고 있다. 그러한 점을 해결하기 위해 아래와 같이 컴포넌트에 규칙이 생긴다면 데이터의 추적을 할 수 있다는 장점을 가지고 있다!!! 2019. 12. 27. 이전 1 2 3 다음
