[국비 89일차 TIL] Vue 뷰 mp3 오디오 플레이, 게시판 추가

mp3 오디오 플레이

App.vue

<template>
<div>
  <button @click="play('siren.mp3')"></button>
</div>
</template>

<script>

export default {
  name: 'App',
  components: {  },
    methods : {
      play(mp3){
        let audio = new Audio(mp3);
        audio.play();
      }
    }     

}
</script>

 

<template>
<div>
  <button @click="play('siren.mp3')">siren</button>
  카운트 : {{ count }}
  <button v-on:click="countClick">클릭해보세요</button>
  <button v-on:click="up">up</button>
  <button v-on:click="down">down</button>
  <button v-on:click="reset">reset</button>
</div>
</template>

<script>

export default {
  name: 'ButtonClick',
  components: {  },
  data : function() {
    return {
      count : 1 // 1로 초기화
  }
},
    methods : {
      countClick(){
        this.count += 1;
      },
      up(){
        this.count++
      },
      down(){
        this.count--
      },
      reset(){
        this.count = 1
      },
      play(mp3){
        let audio = new Audio(mp3);
        audio.play();
      }
    }     
}
</script>

div 추가하기

App.vue

<template>
<div>
  <DivCopy></DivCopy>
</div>
</template>

<script>
import DivCopy from './components/DivCopy.vue';

export default {
  name: 'ButtonClick',
  components: { 
    DivCopy
   }
</script>

DivCopy.vue

<template>
    <div id="add">
        <h2>추가된 Div</h2>
    </div>
</template>


<script>
export default {
    name : 'DivCopy'
}
</script>

<style scoped>
#add{
    width: 100px;
    height: 100px;
    background-color: gold;
}
</style>

 

vue router 생성

 

1. 폴더 생성 

vue create vue-router [엔터]

Default ([Vue 3] babel, eslint) [선택]

2. router 설치

폴더 이동 cd vue-router [엔터]

npm install --save vue-router

3. 실행하기

npm run serve [엔터]

 

 

폴더 생성

 

MenuPage.vue

<template>
    <header>
        <nav>
            <ul>
                <li>index</li>
                <li>메인</li>
                <li>게시판</li>
                <li>로그인</li>
                <li>가입하기</li>
            </ul>
        </nav>
    </header>
</template>
<script>
export default {
    name : 'MenuPage'    
}
</script>
<style scoped>

</style>

App.vue

<template>

<MenuPage></MenuPage>
</template>

<script>
import MenuPage from './components/MenuPage.vue'
export default {
  name: 'App',
  components: {
    MenuPage
  }
}
</script>

index.js

import { createRouter, createWebHistory } from 'vue-router';
import indexPage from '@/views/IndexPage.vue'
import boardList from '@/views/BoardList.vue'
import mainPage from '@/views/MainPage.vue' 
import loginPage from '@/views/LoginPage.vue' 
import joinPage from '@/views/JoinPage.vue'


const routes = [
    {path: '/', name: 'index', component: indexPage},
    {path: '/join', name: 'join' , component: joinPage},
    {path: '/boardList', name: 'boardList', component: boardList},
    {path: '/main', name: 'main', component: mainPage}, 
    {path: '/login', name: 'login', component: loginPage}
]

const router = createRouter({
  history: createWebHistory(process.env.Base_URL),
  routes
});

// app.use(router);
export default router;
"";

main.js

import { createApp } from 'vue'
import App from './App.vue'

// 추가하는 부분 (import, const)
import router from './router' 

const app = createApp(App)
app.useAttrs(router).mount('#app')

 

<template>
<MenuPage/>
<router-view/>
</template>

<script>
import MenuPage from './components/MenuPage.vue'
export default {
  name: 'App',
  components: {
    MenuPage
  }
}
</script>

<style>
body{ margin: 0; padding: 0; } 
#app { 
  font-family: Avenir, Helvetica, Arial, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; text-align: center; 
  color: #2c3e50; }
</style>