분류 전체보기 (123) 썸네일형 리스트형 [Do it! Vue.js 입문] 04. 뷰 컴포넌트 뷰 컴포넌트 컴포넌트란? 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미 => 화면을 빠르게 구조화 하여 일괄적인 패턴으로 개발 네비게이션 바(navigation bar), 테이블(table), 리스트(list), 인풋 박스(input box) 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리함. 컴포넌트는 지역(Local) 컴포넌트와 전역(Global) 컴포넌트 두 가지가 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트 등록하기 Vue.component('컴포넌트 이름', { //컴포넌트 내용 }); 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그(custom .. [Do it! Vue.js 입문] 03. 뷰 인스턴스 뷰 인스턴스(Instance) 뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위다. {{ message }} [02. Hello Vue.js! 프로젝트 만들기]에서 사용했던 코드를 살펴보면 new Vue() 부분이 바로 인스턴트이다. new Vue()에서 Vue는 생성자로 뷰 라이브러리를 로딩하고나면 접근할 수 있다. (생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서이다. * 생성자 : 객체 생성시 자주 사용하는 기능을 미리 만들고, 그 객체를 확장(구현된 기능+개발자가 추가로 구현한 기능)해 사용하는 객체 지향 프로그래밍에서 사용되는 기법) 인스턴트 재정의시 사용.. [Do it! Vue.js 입문] 02. Vue.js 시작하기 Vue.js 시작하기 기존 사이트에서 Vue를 사용하려면 아래 또는 Node.js를 설치해 NPM을 사용하는 방법도 있는데, 더 자세한건 아래 링크를 참조하자. (NPM은 나중에 다룰 것) 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Vue 시작하기 - Web 개발 학습하기 | MDN 이제 우리가 배울 세 번째 프레임워크인 Vue를 소개하겠습니다. 이 글에서 우리는 Vue에 대한 간단한 배경지식을 얻고, Vue를 설치하고 새로운 프로젝트를 만드는 방법을 배웁니다. 또한 전체 developer.mozilla.org 간단한 페이지를 하나 만들어보자. 먼저 테스트용으로 index.html 파일을 하나 만든다. 아래는 뷰 라이브러리를 로딩한 후, 뷰로 간단.. [Do it! Vue.js 입문] 01. 개발 환경 설정하기 Do it! Vue.js 입문 Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개! 실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서! 실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.j book.naver.com Vue.js 학습을 위한 개발 환경 설정하기 우선 아래의 도구들을 설치한다. ( 기존에 사용하던 텍스트 에디터나 통합개발환경(IDE)가 있다면 그걸 사용해도 되지만, 책을 따라가기로 했다. ) 크롬 브라우저 아톰(Atom) 텍스트 에디터 노드제이에스(Node.js) 뷰 개발자 도구(Vue.js devtools, 크롬 확장 플러그인) #크롬 브라우저 설치 Chrome이나 크롬을 검색해 다운로드 URL(https://www.google.c.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 31 다음
