Vue.js - 기본 CDN 설치
① Vue.js는 최신 트렌드에 맞는 진보적인 프레임워크이다.
② 핵심 라이브러리에는 뷰 레이어에 초점을 맞춰어 코딩하면 된다.
③ 대규모 개발 프로젝트에서 Vue.js는 통합 관점에서 매우 편하다는 것을 알 수 있다.
|
<!-- Vue.js CDN 설치 -->
<!-- HTML 파일 내에 삽입 하면 끝.(위치 중요) --> <script src="https://unpkg.com/vue"></script> |
cs |
Vue.js 기초문법1 - 선언적(정적) 렌더링1(Rendering)
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
</script> |
cs |
실행 화면
Vue.js 기초문법2 - 선언적(정적) 렌더링2(Rendering)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<div id="app">
<span v-bind:title="message">
마우스를 올리면 타이틀 메시지를 볼 수 있어요!
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})
</script> |
cs |
지시어(Directive) v-bind 가 사용되었다. 즉, DOM 속성에 반응하여 최신 상태로 유지한다.
앞으로는 v- 로 시작하는 지시어(디렉티브)에 대해서 자주 보게 될 것이다.
실행 화면
Vue.js 기초문법3 - 조건문
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<div id="app">
<p v-if="seen">조건문 테스트 메시지</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
</script> |
cs |
지시어(Directive) v-if가 사용되었다. 브라우저 개발자 모드를 통해 false 로 변경했을 때 DOM 상태 변화를 확인한다.
실행 화면
Vue.js - 전체소스 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>webpos-do</title>
</head>
<body>
<div id="app">
<h3>기본 렌더링 테스트1</h3>
{{ message }}
</div>
<br/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>webpos-do</title>
</head>
<body>
<div id="app">
<h3>기본 렌더링 테스트1</h3>
{{ message }}
</div>
<br/>
<div id="app-2">
<h3>기본 렌더링 테스트2</h3>
<span v-bind:title="message">
마우스를 올리면 타이틀 메시지를 볼 수 있어요!
</span>
</div>
<br/>
<div id="app-3">
<h3>기본 조건문 테스트</h3>
<p v-if="seen">조건문 테스트 메시지</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
// 기본 렌더링 테스트1
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
// 기본 렌더링 테스트2
var app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})
// 기본 조건문 테스트
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
</body>
</html>
|
cs |
Vue.js - 예제 소스 코드 다운로드
vue_basic1_example.zip 다음 포스팅에서는 Vue.js 이벤트 핸들러(handler) 및 반복문을 다룰 것 입니다.
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle) (1) | 2017.11.29 |
|---|---|
| Vue.js - 기초 문법 배우기(4) 강의 및 예제 소스 - watch(감시자) (0) | 2017.11.27 |
| Vue.js - 기초 문법 배우기(3) 강의 및 예제 소스 (4) | 2017.11.26 |
| Vue.js - 기초 문법 배우기(2) 강의 및 예제 소스 (2) | 2017.10.01 |
| Vue.js - 기초 설치 방법 및 Ajax (Fetch) 통신 기본 예제 (1) | 2017.09.29 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}