프로그래밍/VueJS
vue.js 의 이전과 다음 화면 바인딩 하기 (template 사용)
재우니
2018. 3. 14. 17:48
VUE.JS 소스이며, 이전 다음 버튼을 누르면
버튼 누른 엑션에 맞게, 이전 다음의 template 에 기재되어 있는 html 을 바인딩 처리 해 줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>06-16</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.header {
padding: 15px 15px 20px 15px;
border-bottom: 1px solid #e5e5e5;
}
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
</style>
</head>
<template id="before-template">
<div>
<h1>이전화면</h1>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">이름</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="이름을 넣어줘요~">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">내용</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">저장하기</button>
</div>
</div>
</form>
</div>
</template>
<template id="next-template">
<div>
<h1>다음화면</h1>
<div class="list-group">
<a v-for="post in posts" href="#" class="list-group-item clearfix">
{{ post }}
<span class="pull-right">
<button class="btn btn-xs btn-info">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button class="btn btn-xs btn-warning">
<span class="glyphicon glyphicon-trash"></span>
</button>
</span>
</a>
</div>
</div>
</template>
<script type="text/javascript">
Vue.component('next-post', {
template: '#next-template',
data: function () {
return {
posts: [
'권판진',
'고은영',
'이은주',
'김상호'
]
}
}
})
Vue.component('before-post', {
template: '#before-template'
})
</script>
<body>
<div id="app">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation">
<a href="#" @click="currentView='before-post'">이전</a>
</li>
<li role="presentation">
<a href="#" @click="currentView='next-post'">다음</a>
</li>
</ul>
</nav>
</div>
<div class="container">
<component :is="currentView"></component>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.devtools = true;
var vm = new Vue({
el : "#app",
data: {
currentView: 'before-post'
}
})
</script>
</html>