[Vue] 반복문, 버튼 만들기

 

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>

✏️ 추가하면 추가한 만큼 값이 출력됨

실행화면