|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://unpkg.com/vue"></script>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<title>Sample Vue Dummy Sample App</title>
</head>
<body>
<div class="container" id="app">
<button class="btn btn-primary" @click="getData()">Bring Dummy Data</button>
<table class="table">
<tr v-for="(dummy, i) in dummies" :key="dummy.id">
<th>{{dummy.id}}</th>
<td><span style="cursor: pointer;" @click="getDetail(dummy)">{{dummy.title}}</span></td>
<td>{{dummy.userId}}</td>
</tr>
</table>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title"><b>{{content.id}}</b>{{content.title}}</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
{{content.body}}
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Vue인스턴스 -->
<script>
new Vue({
el: '#app',
data() {
return {
dummies: [],
content: {}
}
},
methods: {
getData() {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(res => {
this.dummies = res.data
})
.catch(err => {
alert(`error: ${err.message}`)
})
},
getDetail(content) {
$("#myModal").modal();
this.content = content;
}
}
})
</script>
</body>
</html>
|
'basic > Vue.js' 카테고리의 다른 글
| 스크롤 이벤트 사용하기 (0) | 2021.10.14 |
|---|---|
| history모드 설정하기 (0) | 2021.06.22 |
| Vue CLI (0) | 2021.06.19 |
| [Vue.js] Life Cycle (0) | 2021.05.27 |
| package.json (0) | 2021.05.27 |
