책/Vue.js 퀵스타트 썸네일형 리스트형 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 에 사용하는 화살표 함수를 사용하지 말아야 한다. 함수 내.. 더보기 Vue.js 기초 hello vue.js 예제 분석 {{ message }} 기본 디렉티브 v-text, v-html v-bind 요소의 콘텐츠 영역을 설정하는 것이 아닌 요소 객체의 속성들을 바인딩하기 위해 사용 v-model 양방향 바인딩 몇가지 수식어를 지원 lazy : 입력폼에서 이벤트가 발생할 때 입력한 값을 데이터와 동기화. 텍스트 박스에서라면 입력 후 포커스가 이동하거나 할때 데이터 옵션 값 변경 number : 이 수식어를 지정하면 숫자가 입력될 경우 number 타입의 값으로 자동 형병환되어 데이터 옵션값으로 반영 trim : 이 수식어를 지정하면 문자열의 앞뒤 공백을 자동으로 제거 입력된 이름 : 좋아하는 과일을 모두 골라주세요 사과, 키위, 포도, 수박, 참외 선택된 과일들 : v-show, v-if,.. 더보기 시작하기 개발환경 설정 node js 설치 npm install -g npm (최신 버젼으로 업그레이드) visual studio code 설치 플러그인설치 View -> Extension 또는 CTRL + SHIFT + X view-in-browser : html 파일을 기본 브라우져로 볼 수 있도록 함 vetur : vue.js 코드에 대한 문법 강조(Syntax highlighting), 코드 자동완성, 디버깅, 린팅 기능등을 제공 HTML Snippets : HTML 태그 조각을 빠르게 작성할 수 있도록 도와줌 JS-CSS-HTML Formatters : JS, CSS, HTML의 코드 자동완성 기능을 제공 (CTRL + SPACE) Vue 2 Snippets : Vue.js 2.0의 코드 조각 지원과 문.. 더보기 이전 1 2 다음
