반응형
Vue를 이용해서 Board 만들기
01) 새로운 프로젝트 생성
✏️ 터미널에서 파일을 생성할 폴더로 들어간 후 'vue create sep13' 입력
vue create sep13
✏️ Visual Studio Code에서 생성한 파일 열기
✏️ 새 터미널 열고 'npm run serve' 입력하여 서버 구동하기
02) components에 새로운 파일 생성하기
03) BoardVue.vue 기본 설정
<template>
</template>
<script>
</script>
<style scoped>
</style>✏️ <style>에서 scoped는 해당하는 뷰에서만 사용하고 그 이외엔 사용하지 않는다는 뜻
04) BoardVue.vue 보드 입력하기
<template>
<div class="board-back">
{{ items }}
</div>
</template>
<script>
export default{
data() {
return {
items : [
{boardNo:10, title:'제목이다', writer:'peazh', date:'2023-09-13', read:150},
{boardNo:9, title:'제목이다', writer:'peazh', date:'2023-09-13', read:150},
{boardNo:8, title:'제목이다', writer:'peazh', date:'2023-09-13', read:150},
{boardNo:7, title:'제목이다', writer:'peazh', date:'2023-09-13', read:150},
{boardNo:6, title:'제목이다', writer:'peazh', date:'2023-09-13', read:150},
{boardNo:5, title:'제목이다', writer:'peazh', date:'2023-09-13', read:150},
{boardNo:4, title:'제목이다', writer:'peazh', date:'2023-09-13', read:150},
{boardNo:3, title:'제목이다', writer:'peazh', date:'2023-09-13', read:150},
{boardNo:2, title:'제목이다', writer:'peazh', date:'2023-09-13', read:150},
{boardNo:1, title:'제목이다', writer:'peazh', date:'2023-09-13', read:150}
]
}
},
}
</script>✏️ items는 위에서 쓸 변수명이고 배열 속에 오브젝트가 있는 형태
05) App.vue에 BoardVue.vue 연결하기
<template>
<BoardVue></BoardVue>
</template>
<script>
import BoardVue from './components/BoardVue.vue';
export default {
name: 'App',
components: {
BoardVue
}
}
</script>
<style>
</style>
✏️ 값이 잘 들어오는지 확인
Vue에서 For문 사용하기
01) BoardVue.vue에서 반복문 사용해서 테이블 만들기
<template>
<table>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr v-for="n in items" v-bind:key="n.boardNo">
<td>{{ n.boardNo }}</td>
<td>{{ n.title }}</td>
<td>{{ n.writer }}</td>
<td>{{ n.date }}</td>
<td>{{ n.read }}</td>
</tr>
</table>
</template>✏️ v-for="n in items" : items를 하나씩 꺼내서 n에 넣음
✏️ v-bind:key="n.boardNo" : 각 요소에 boardNo 속성을 키로 사용하도록 지정함
✏️ 작성하다가 오류가 난다면 오류의 개수를 표시해줌
02) 반복문 사용해서 구구단 출력하기
<template>
<div v-for="n in 9" v-bind:key="n">
<div class="xx">
<span v-for="i in 9" v-bind:key="i">
{{ n }} * {{ i }} = {{ n*i }}
<br>
</span>
</div>
</div>
</template>
<style scoped>
.board-back{
height: 500px;
width: 900px;
margin: 0 auto;
padding: 10px;
background-color: pink;
}
.xx {
width: 100px;
float: left;
text-align: left;
}
</style>
버튼을 이용해서 동작하기
01) 눌렀을 때 소리나는 버튼 만들기 : 'SoundOne.vue' 생성
<template>
<div class="index">
Value :
</div>
<button @click="play('http://172.30.1.1/deagum.mp4')">audioPlayer</button>
</template>
<script>
export default{
methods: {
play(file){
if(file){
var audio = new Audio(file);
audio.play();
}
}
}
}
</script>
<style>
</style>✏️ button을 클릭하면 play가 동작하는 메서드를 만들어서 호출
02) 'App.vue'에 'SoundOne.vue' 연결하기
<template>
<SoundOne></SoundOne>
</template>
<script>
import SoundOne from './components/SoundOne.vue';
export default {
name: 'App',
components: {
SoundOne
}
}
</script>
<style>
</style>
✏️ button을 클릭하면 오디오가 재생됨
03) 눌렀을 때 카운트되는 버튼 만들기
<template>
<div class="index">
<div>count : {{ count }}</div>
<button v-on:click='bClickUp'>⬆️</button>
<button v-on:click='bClickDown'>⬇️</button>
<button v-on:click='bClickReset'>🔄</button>
</div>
</template>
<script>
export default{
methods: {
bClickUp() {
this.count += 1
},
bClickDown() {
this.count -= 1
},
bClickReset() {
this.count = 0
}
},
data() {
return {
count : 1
}
},
}
</script>
<style>
.index {
padding-bottom: 20px;
}
</style>✏️ bClickUp()은 숫자가 +1되고, bClickDown()은 숫자가 -1, bClickReset()은 다시 0으로 되돌려주는 버튼 생성
div 만들어서 여러개 붙이기
01) 'DivBox.vue' 생성
<template>
<div class="add"></div>
</template>
<script>
export default {
name : 'DivBox'
}
</script>
<style scoped>
.add {
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 10px;
}
</style>
02) 'App.vue'에 'DivBox.vue' 연결하기
<template>
<DivBox></DivBox>
</template>
<script>
import DivBox from './components/DivBox.vue';
export default {
name: 'App',
components: {
DivBox
}
}
</script>
<style>
</style>
03) 'App.vue'에 <DivBox> 추가하기
<template>
<DivBox></DivBox>
<DivBox></DivBox>
<DivBox></DivBox>
</template>✏️ 추가하면 추가한 만큼 값이 출력됨
반응형
댓글