ABCD 의 4월 정기 세미나 자료입니다.

1. Vue.js 시작하기
ABCD / 한성일

2. Vue 소개
Vue(/vjuː/ )
View

3. Vue 장점
뷰 레이어에만 초점을 맞춰서
“빠르다.
심플하다.
편하다”
https://kr.vuejs.org/v2/guide/comparison.html

4. 설정
<script src=“https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js">
</script>
직접 <script>에 추가
# 최신 안정화 버전
$ npm install vue
$ npm install --global vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
CLI 프로젝트 생성
(webpack)
NPM
# vue-cli 설치
# 프로젝트 생성
# 의존성 설치

5. Hello World
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
<div id="app">
{{ message }}
</div>
https://codepen.io/snowkiwi/pen/XRpRjz

6. Vue 인스턴스
https://kr.vuejs.org/images/lifecycle.png
life Cycle
https://codepen.io/snowkiwi/pen/mmrvvO
var app = new Vue({
// …
})

7. 템플릿 문법
https://codepen.io/snowkiwi/pen/NjRJVm
var app2 = new Vue({
el: '#app-2',
data: {
seen: true,
url: "http://abcds.kr",
doSomething: function() {
alert('doSomething');
}
}
})
<div id="app-2">
<p v-if="seen">이제 나를 볼 수 있어요</p>
<a v-bind:href="url">abcds</a> <br/>
<a v-on:click="doSomething">do</a> <br/>
<!-- 수식어 -->
<form v-on:submit.prevent="onSubmit"></form>
</div>

8. 계산된 속성과 감시자
https://codepen.io/snowkiwi/pen/WjGqdY
new Vue({
computed: {
reversedMessage: function () {
}
}
methods: {
reverseMessage: function () {
}
}
})
computed vs. methods
computed : 캐싱 methods : 재 렌더링시 계속 호출

9. 계산된 속성과 감시자
https://codepen.io/snowkiwi/pen/WjGqdY
new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar',
},
watch: {
firstName: function (val) {
},
lastName: function (val) {
}
}
})
watch : 데이터 변경 감시

10. 클래스와 스타일 바인딩
https://codepen.io/snowkiwi/pen/EmNxBN
new Vue({
el: '#app-3',
data: {
activeColor: 'red',
fontSize: 30,
styleObject: {
color: 'red',
fontSize: '13px'
}
}
})
<div id="app-3">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">객체구문1</div>
<div v-bind:style="styleObject">객체구문2</div>
<div v-bind:style="[activeColor, fontSize]">배열구문</div>
</div>

11. 조건부 렌더링
https://codepen.io/snowkiwi/pen/JNbYzE
<!-- v-if -->
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<!-- v-else -->
<div v-if="Math.random() > 0.5">
이제 나를 볼 수 있어요
</div>
<div v-else>
이제는 안보입니다
</div>
<!-- v-else-if -->
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

12. 리스트 렌더링
https://codepen.io/snowkiwi/pen/eWBZWr
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})

13. 이벤트 핸들링
https://codepen.io/snowkiwi/pen/GmNjoX
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p>
</div>
new Vue({
el: '#example-1',
data: {
counter: 0
}
})

14. 폼 입력 바인딩
https://codepen.io/snowkiwi/pen/bWBwOd
<div id="example-3">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<br>
<span>체크한 이름: {{ checkedNames }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})

15. 컴포넌트
https://codepen.io/snowkiwi/pen/BRQpPP
Vue.component('my-component', {
template: ‘<div>사용자정의..</div>’
})
new Vue({
el: '#example'
})
<div id="example">
<my-component></my-component>
</div>
!! 사용자 정의 태그이름 :
모두 소문자이어야 하고 하이픈을 포함해야합니다

16. 컴포넌트
https://codepen.io/snowkiwi/pen/BRQpPP
props는 아래로, events 위로

17. 컴포넌트
https://codepen.io/snowkiwi/pen/BRQpPP
상위 컴포넌트가 업데이트 될 때마다
하위 컴포넌트의 모든 props가 최신 값으로 갱신
하위 컴포넌트 내부에서 prop을 변형하려고 시도하면 안됨

18. 변경 내용을 추적하는 방법

19. 전환 효과
https://codepen.io/snowkiwi/pen/eWgReX

20. 트렌지션 상태
https://codepen.io/snowkiwi/pen/xdgrWb

21. 고급
렌더 함수
사용자 지정 디렉티브
믹스인
플러그인
단일 파일 컴포넌트
프로덕션 배포 팁
라우팅
상태 관리
단위 테스팅
서버사이드 렌더링
TypeScript 지원

22. 참고 #1
https://kr.vuejs.org/v2/guide/
공식

23. 참고 #2
#1. 시작하기 : https://codepen.io/snowkiwi/pen/gWwqLP
#2. 인스턴스 : https://codepen.io/snowkiwi/pen/mmrvvO
#3. 템플릿 문법 : https://codepen.io/snowkiwi/pen/NjRJVm
#4. 계산된 속성과 감시자 : https://codepen.io/snowkiwi/pen/WjGqdY
#5. 클래스와 스타일 바인딩 : https://codepen.io/snowkiwi/pen/EmNxBN
#6. 조건부 렌더링 : https://codepen.io/snowkiwi/pen/JNbYzE
#7. 리스트 렌더링 : https://codepen.io/snowkiwi/pen/eWBZWr
#8. 이벤트 핸들링 : https://codepen.io/snowkiwi/pen/GmNjoX
#9. 폼입력 바인딩 : https://codepen.io/snowkiwi/pen/bWBwOd
#10. 컴포넌트 : https://codepen.io/snowkiwi/pen/BRQpPP

24. 수고하셨습니다. :)
abcds.kr