싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 W ebpack, Browserify와 같은 도구가 필요합니다.

그러나 Webpack을 이용해 직접 프로젝트를 구성하기에는 상당히 배워야할 것이 많습니다. 그래서 뷰 프레임워크에서는 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI(Command Line Interface)도구를 제공합니다. 이를 뷰 CLI라고 합니다.

1. 뷰 CLI 설치

bpack을 이용해 직접 프로젝트를 구성하기에는 상당히 배워야할 것이 많습니다. 그래서 뷰 프레임워크에서는 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI(Command Line Interface)도구를 제공합니다.

아래와 같이 명령어를 입력하여 간단하게 설치할 수 있습니다.

1. vue init 명령어로 프로젝트 생성하기

2. npm install을 입력하여 뷰 애플리케이션을 구동하기 위한 관련 라이브러리 다운로드하기.

아래는 설치까지 완료된 후 프로젝트의 폴더 구조입니다. 이 중 package.json 파일은 프로젝트 정보를 담고 있는 설정 파일임과 동시에 npm명령어 및 뷰로 애플리케이션을 제작하는 데 필요한 라이브러리 정보들을 포함하고 있습니다.

npm install을 입력하면 package.json의 라이브러리 목록이 모두 node_modules 폴더 밑에 설치가 됩니다.

3. npm run dev로 실행하기!

실행을 하면 마침내 아래와 같이 8080포트로 index.html이 열리게 됩니다!!

HTML 태그 안에 v- 접두사를 가지는 모든 속성이다.

디렉티브는 화면의 요소를 더 쉽게 조작할 수 있게 도와준다. 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신된다.

v-bind 는 아이디, 클래스, 스타일 등의 HTML속성 값에 뷰 데이터 값을 연결할 때 사용한다.

<p v-bind:class="test">v-bind 테스트</p>

v-if 는 지정한 뷰 데이터값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.

v-for  은 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다.

v-show  v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 다만 v-if는 해당 태그를 완전히 삭제하지만 v-show는 css효과만 display:none; 으로 준다.

v-on  은 화면 요소의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어 v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행할 수 있다.

v-model  은 Form에서 주로 사용되는 속성으로 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. * <input>, <select>, <textarea> 태그에만 사용할 수 있다.