전체 글 썸네일형 리스트형 axios를 이용한 서버통신 서비스 API 소개 https://github.com/stepanowon/contactsvc stepanowon/contactsvc node.js + express + sqlite 기반의 간단한 RESTful Service 예제 - stepanowon/contactsvc github.com npm install, npm run start 를 통해서 실행 localhost:3000 으로 확인 연락처 서비스 목록 GET /contacts 연락처 목록을 조회하며 특정 페이지 데이터를 조회 GET /contacts/no 특정 일련번호 한 건의 연락처 정보를 조회 GET /contacts/search/:name 이름의 일부를 이용해 연락처를 검색. 2글자 이상가능 POST /contacts 새로운 연락처 추가 P.. 더보기 컴포넌트 심화 단일 파일 컴포넌트 전역 수준 컴포넌트의 문제점 빌드 단계가 없으므로 ECMAScript2015, TypeScript와 같은 최신 자바스크립트 문법을 사용할수 없음. 따라서 HTML 내부에 직접 ECMAScript2015 이전 버전의 자바스크립트 코드를 작성해야 함 CSS를 지원하지 않음. 컴포넌트들은 고유한 스타일 정보를 포함하는 경우가 많은데, 전역컴포넌트에서는 CSS스타일을 빌드하고 모듈화 할 수 있는 기능을 제공하지 않음 컴포넌트의 템플릿이 작성될 때 HTML 파일안에 여러 개의 태그가 작성되어 식별하기 어려움. 또한 템플릿마다 고유한 id를 부여하고 컴포넌트들도 고유한 이름을 지정해야 함 vue cli를 이용하여 프로젝트 생성 vue-loader : , src/components/List.vue.. 더보기 Vue-CLI 도구 Vue CLI 구성요소와 설치 CLI: @vue/cli 새로운 Vue 애플리케이션 프로젝트를 생성할 수 있음 vue 단일 파일 컴포넌트를 설정없이 실행하여 테스트 할 수 있음 GUI 환경으로 프로젝트를 생성하거나 관리할 수 있음 CLI 서비스: @vue/cli-service CLI 서비스는 프로젝트가 생성될 때 개발 의존성으로 설치되는 구성요소임. 내부는 웹팩과 웹팩 개발 서버 기반으로 작성됨 프로젝트를 웹팩 개발 서버 기반으로 구동할 수 있음 프로젝트 소스코드와 리소스를 빌드하고 번들링할 수 있음 프로젝트 코드를 테스트할 수 있음 CLI 플러그인 Vue CLI로 생성된 프로젝트 추가적인 기능을 제공하는 npm 패키지 router : 애플리케이션에 라우팅 기능을 제공하는 vue-router 패키지와 예제.. 더보기 ECMAScript 2015 ECMA2015를 사용하기 위한 프로젝트 설정 프로젝트를 위한 임의이 디렉터리 생성 npm init 명령으로 package.json 파일 생성 C:\JetBrains\vscode_workspace\es2015test> npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install ` afterwards to in.. 더보기 컴포넌트 기초 컴포넌트 조합 부모 자식 관계 트리로 구성 전달방향은 주로 부모에서 자식으로 전달(단방향) 부모는 속성(props)으로 자식에게 전달, 자식은 부모에게 이벤트를 발신 data, methods, computed, watch 의 Vue 인스턴스 옵션을 컴포넌트 수준에서 사용가능 컴포넌트에서의 data 옵션은 반드시 함수로 작성 컴포넌트 기반 개발시 data 옵션은 각 컴포넌트의 로컬 상태를 관리하기 위한 용도로 작성 data 옵션을 단순한 객체값으로 사용하는 경우 모두가 동일한 값을 참조하기 때문 컴포넌트의 작성 Vue.component(tagname, options); /* tagname : 컴포넌트를 사용할 태그명 options : 컴포넌트에서 랜더링할 templet등을 지정 */ live-server .. 더보기 스타일 스타일 적용 우선순위 위 > 아래 > 인라인 인라인 스타일 테스트 값 하나 하나에 바인딩 테스트 여러개의 객체 바인딩 버튼 CSS 클래스 바인딩 버튼1 디지안1 디지안2 디지안3 버튼1 디지안1 디지안2 디지안3 계산형 속성, 메서드를 이용한 스타일 적용 1부터 100까지만 입력 가능합니다. 점수 : 컴포넌트에서의 스타일 적용 TodoList 예제 Todo List App 추 가 {{ a.todo }} 완료 × 더보기 이벤트 처리 인라인 이벤트 처리 및 이벤트 핸들러 메서드 v-on 디렉티브는 @로 줄여서도 가능 예금 인출 계좌 잔고 : {{ balance }} 기본 이벤트가 처리되지 않도록 하기 대표적인 기본 이벤트 a 요소를 클릭했을 때 href 특성의 경로로 페이지를 이동시킴 브라우저에서 오른쪽 마우스를 클릭했을때 내장컨텍스트메뉴가 나타남 form 요소의 submit 버튼 클릭시 action 특성에 지정된 경로로 이동 input[type=text] 요소에 키보드를 누르면 입력한 문자가 텍스트 박스에 나타남 이벤트 수식어 .prevent : 기본 이벤트를 막음 페이스북 이벤트 전파와 버블링 .stop : 이벤트 전파를 중단 시킴. .capture : 이벤트 포착(CAPTUREING_PHASE) 단계에서만 이벤트가 발생. .se.. 더보기 Vue 인스턴스 el, data, computed 옵션 data 옵션 : Vue 인스턴스가 관찰하는 데이터 객체를 의미 vm.name 을 data 옵션으로 직접 접근하려면 다음과 같이 작성 vm.$data.name el 옵션 : Vue 인스턴스에 연결할 HTML 요소를 지정. 여러개 요소를 지정할 수 없음. 선택자로 여러개를 지정해도 첫번째 요소에만 연결됨 computed 옵션 : 지정하는 것은 함수이지만 사용 시에는 속성 처럼 사용 set 메서드를 지정하여 쓰기 작업도 가능 메서드 methods 와 computed 의 차이점 computed(계산형속성)은 종속된 값에 의해 결괏값이 캐싱 methods는 sum() 메서드를 매번 실행 주의점 ECMAScript6 에 사용하는 화살표 함수를 사용하지 말아야 한다. 함수 내.. 더보기 이전 1 2 3 4 5 ··· 9 다음
