CH1 Vue.js 프레임워크의 기초
S04 설치하기
16페이지
6장까지는 <script> 태그로 파일을 읽어 들이기만 하면 사용할 수 있는 스탠드얼론(Standalone) 버전의 ‘Vue.js’ 파일을 사용합니다
vue.js<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
공부 전용 파일
17페이지
index.html<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue.js App</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<!-- 여기 #app 내부에 템플릿을 출력할 것입니다. -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var app = new Vue({
el: '#app'
})
/* StyleSheet */
환경 설정이 따로 필요 없고 가볍게 사용할 수 있는 온라인 에디터 서비스도 참고해 보기 바랍니다.
S05 Vue.js의 기본 기능
20~24페이지
텍스트 바인딩
20페이지
<p>{{ message }}</p>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
Hello Vue.js!
반복 렌더링
21페이지
<ol>
<li v-for="item in list">{{ item }}</li>
</ol>
var app = new Vue({
el: '#app',
data: {
list: ['사과', '바나나', '딸기']
}
})
- 사과
- 바나나
- 딸기
이벤트 사용하기
22페이지
<button v-on:click="handleClick">Click</button>
var app = new Vue({
el: '#app',
methods: {
handleClick: function (event) {
alert(event.target) // [object HTMLButtonElement]
}
}
})
※ 버튼을 클릭하면 경고창이 출력됩니다.
입력 양식과 동기화하기
22페이지
<input v-model="message">
<p>{{ message }}</p>
var app = new Vue({
el: '#app',
data: {
message: '초기 메시지'
}
})
※ 좋아하는 글자를 입력해보세요.
초기 메시지
조건 분기
23페이지
<button v-on:click="show=!show">변경하기</button>
<p v-if="show">Hello Vue.js!</p>
var app = new Vue({
el: '#app',
data: {
show: true
}
})
Hello Vue.js!
트랜지션과 애니메이션
24페이지
<button v-on:click="show=!show">변경하기</button>
<transition>
<p v-if="show">Hello Vue.js!</p>
</transition>
var app = new Vue({
el: '#app',
data: {
show: true
}
})
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}
/* opacity:0에서 1까지 페이드인&페이드아웃하기 */
.v-enter, .v-leave-to {
opacity: 0;
}
Hello Vue.js!