npm install vue bootstrap bootstrap-vue
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.config.productionTip = false
Vue.use(BootstrapVue)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">Joyworld</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/">Home</b-nav-item>
<b-nav-item to="/board/free">Table</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name:"Header",
data(){
return{}
}
}
</script>
<template>
<div>
<h1>게시판</h1>
<b-table striped hover :items="items" :fields="fields"></b-table>
</div>
</template>
<script>
import data from '@/data'
export default {
name:"Board",
data() {
return {
items: data.Content,
// fields:['content_id', 'title', 'created_at']
fields:[
{
key:'content_id',
label:'글번호'
},
{
key:'title',
label:'제목'
},
{
key:'created_at',
label:'작성일'
},
]
}
},
}
</script>
item
프로퍼티로 표에 들어갈 데이터를 한번에 넣어줄 수 있다.
field
프로퍼티는 데이터 중 표에 들어갈 키와 값을 설정할 수 있다. 데이터 네임이 아닌 label속성을 통해 이름을 변경할 수 있으며, sortable 속성으로 정렬기능도 제공한다... wow