Jiny vue js 스터디 01

지니의 vueJS 스터디 시작편
2017. 07. 05 이호진 infohojin@naver.com

vueJS 공식 홈페이지 : https://vuejs.org/
한국어 사이트 : https://kr.vuejs.org/

Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것입니다.
vueJS 스크립트
vueJS 는 간단하게 웹사이트에 <script> 스크립트 테그를 추가함으로서 간단하게 시작 및 사용을 할 수 있
습니다.
Vue는 ECMAScript 5 기능을 사용하기 때문에 IE8 이하 버전을 지원하지 않습니다.
하지만 모든 ECMAScript 5 호환 브라우저를 지원합니다
호환성 정보

vueJS 를 이용하여 화면에 글자를 표시
①
②
③
Hello world 출력

HTML에서 DIV 태그로 작성된 내용 {{ message }} 이 화면이
출력될 것입니다.
DOM 처리

① vueJS 스크립트를 로드합니다.
③ prefix 코드 처리를 통하여 메시지
내용을 DOM 치환 처리 합니다.
② DIV id값으로 요소를 처리합니다.
DOM 처리

DOM 과 데이터가 연결이 되어 있어 스크립트에서 데이터를 변경하면 즉시 데이터가 반등이 됩니다.
DOM의 id값과 속성을 통하여 화면출력을 제어를 하실 수 있습니다.
app 객체변수를 생성후에 메서드에 접근하여 데이터를 바로 수정할 수도 있습니다.
app.message = 'hello world!’;
이처럼 화면을 갱신하지 않고 동적으로 DOM을 접근하여 데이터를 변경 및 처리가 가능합니다.
반응형 DOM

엘리먼트 속성을 바인딩할 수
있습니다.
Vue는 디렉티브 라고 하여 속성을
제어할 수 있는 전용 키워드 를 제공
합니다.
v-bind: 접두어로 시작하는 특수 속
성을 제공합니다.
바인딩

앞 전의 예제를 실행후에 마우스를 올려놓으면 실시간으로 날짜가 표시된 타
이틀 마크를 확인할 수 있습니다.
타이틀 바인딩

v-if 조건문
텍스트와 속성뿐 아니라 DOM의 구조에도 데
이터를 바인딩 할 수 있음을 보여줍니다.

스크립트에서 값을 변
경하여 v-if 조건에 따
라서 데이터 출력 여부
를 제어할 수 있습니다.
v-if 조건문

v-for 반복문
v-for 바이딩 디렉티브는 반복처리를 통하여
데이터 바인딩을 할 수 있습니다.

<li v-for="todo in todos">
{{ todo.text }}
</li>
반복문은 foreach 처럼 배열형태의 데이터를 가지고 와서 데이터를 출
력하는 반복작업을 수행합니다.
v-for 반복문

<button v-on:click="reverseMessage">메시지 뒤집기</button>
v-on: 과 같은 디렉티브는 사용자의 동작입력을 처리할 수 입니니다.
Click 시 정의된 reverseMessage 매소드 함수를 실행합니다.
클릭시 문자열을 분석하여 반대로 뒤집기 하는 셈플 예제입니다.

v-model 사용자입력
v-model 과 같은 디렉티브는 form
input 사용자 입력과 같은 처리를 할
수 있습니다.
또한 양방향으로 데이터를 바인딩으로
되어 있어 실시간으로 데이터를 처리
할 수 있습니다.

vueJS는 미리 정의된 Vue 인스턴스를 가지고 있습니다.
컴포넌트 이름은 ‘todo-item’ 입니다. 또한 이 컴포넌트는 하나의 template를 가지고 있습니다.
① 컴포넌트 정의
Vue에서 컴포넌트를 사용하는 방법은 매우 간단합니다. 아래 예제처럼 Vue에서, 컴포넌트를 정의합니다.

② 컴포넌트 사용
HTML 코드상에서 정의한 컴포넌트 이름으로 테그를 삽입합니다.
ⓑ

③ Prop 설정 및 데이터반복

Jiny vue js 스터디 01

More Related Content

Similar to Jiny vue js 스터디 01

Jiny vue js 스터디 01