Front-end/Vue.js7 HTTP 통신 라이브러리 - axios jQuery의 ajax를 많이 사용했는데 vue에서는 axios를 대부분 많이 사용한다고 한다. 근데 왜 사용하냐 ? Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하단다. axios 사용법 get user {{ users }} new Vue({ el : '#app' , data : { users : [] }, methods : { //axios를 처리하기 전의 this와 처리후의 this는 의미가 다르다! getData : function() { var vm = this; axios.get('https://jsonplaceholder.typicode.com/users/') .then(function(response).. 2020. 1. 2. 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. 이전 1 2 다음
