programming study/Vue (70) 썸네일형 리스트형 Vue.js - HTTP 통신 라이브러리(axios) 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. axios Vue에서 권장하는 HTTP 통신 라이브러리 Promise 기반 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어 있고 API가 다양 vue-resource 예전의 공식 라이브러리 샘플코드를 마주칠 수 있으니 참고 Ajax Asynchronous JavaScript and XML 비동기적인 웹 애플리케이션 제작을 위한 웹 개발 기법 HTML 문서에서 일부 필요한 부분만 받아올 수 있다. SPA을 가능하게 하는 기술 중 하나 jQuery.ajax() 오픈 소스를 사용하는 방법 오픈 소스 라이브러리의 깃허브를 참고하기 star 수 확인 커밋과 contributors 확인 .. Vue.js - 뷰 라우터 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. 뷰 라우터 소개와 설치 뷰를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리 페이지 이동을 가능하게 함 npm install vue-router를 입력하여 설치 또는 script 태그에 패키지 소스 코드를 불러오기 2. routes 속성 페이지의 라우팅 정보 어떤 url로 이동했을 때 어떤 페이지가 뿌려질지에 대한 정보 배열이며 각 요소는 페이지의 정보 각 페이지의 정보는 객체 페이지 정보 객체의 key path: 페이지의 url component: 해당 url에서 표시될 컴포넌트 ... // 라우터 인스턴스 var router = new VueRouter({ /.. Vue.js - 컴포넌트 통신 방법(응용) 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 같은 컴포넌트 레벨 간의 통신 방법 상위 컴포넌트를 거쳐서 같은 레벨의 컴포넌트 간의 통신이 가능하다. 예시 ... ... Reference Vue.js 시작하기 -Age of Vue.js Vue.js - 컴포넌트 통신 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. 컴포넌트 통신 컴포넌트를 등록했을 때, 컴포넌트 간의 관계가 생기게 된다. 상위 컴포넌트 - 하위 컴포넌트 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다. props 속성: 상위에서 하위로는 데이터를 내려줌 event: 하위에서 상위로는 이벤트를 올려줌 2. 컴포넌트 통신 규칙이 필요한 이유 N방향 통신의 문제점 특정 기능이 바뀌었을 때 그로인한 버그를 추적하기 어렵다.(MVC 패턴) 컴포넌트 통신 규칙 데이터의 흐름을 추적할 수 있다. 위에서 아래로는 props, 아래에서 위로는 event이므로 3. props 속성 ... // v-bind: props 속성 이름 = "상위 .. Vue.js - 뷰 인스턴스, 컴포넌트 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. 뷰 인스턴스 뷰로 개발할 때 필수로 생성해야 하는 코드이자 단위 인스턴스 생성 ... ... 인스턴스를 생성하고 나면 변수 안에 인스턴스의 내용을 담을 수 있다. Vue가 제공하는 API와 속성이 담기게 된다. 인스턴스 생성 시, el에 특정 태그를 지정해야 Vue를 사용할 수 있게 된다. 기본적으로 Root 컴포넌트가 된다. 인스턴스와 생성자 함수 function Person(name, job) { this.name = name; this.job = job; } var p = new Person('josh', 'developer'); 생성자 함수의 작명법은 Pascal Case .. Vue.js - 개발환경 설정, Vue.js 소개 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. 개발 환경 설정 필요 프로그램 Chrome Visual Studio Code(VSC) Node.js VSC Extention Vetur Chrome Extention Vue.js devtools Live Server 2. Vue.js 소개 Vue는 무엇인가? MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 View: 브라우저에서 사용자에게 보여지는 화면 입력박스, 버튼과 같은 HTML 요소 DOM: JavaScript로 조작할 수 있는 객체 DOM Listieners: View에서 사용자가 클릭, 키보드 입력 등을 하였을 때의 이벤트를 청취.. 이전 1 ··· 6 7 8 9 다음