240401 만우절 Vue 해보기

오늘도 새로운 Vue 를 Create 하여 수업 진행

cd c:/vue

vue create apr01

cd c:/vue/apr01

npm run serve

 

Audio 파일 실행해보기

@click 은 버튼 클릭 시 내부 함수를 실행한다는 뜻

<button @click="play('../siren.mp3')">노래틀기</button>

 

클릭 시 오디오 실행하는 메소드 만들기

methods: {
    play(mp3) {
      let audio = new Audio(mp3);
      audio.play();
    },
  },

 

여기에 집어넣고 버튼 누르면 실행되긴하는데,, 왜 그 밑으로는 넣으면 안될까..

 

누르면 값이 올랐다 내렸다 하는 버튼 만들기

먼저 처음 데이터의 값을 정해줌

data: function () {
    return {
      count: 1,
    };
  },

 

해당 값을 출력하는 html 작성

<div>
  <div>카운트 : {{ count }}</div>
  <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>

 

각 버튼에 맞는 메소드 작성하기

countClick() {
  this.count += 1;
},
up() {
  this.count++;
},
down() {
  this.count--;
},
reset() {
  this.count = 1;
},

 

잘 작동한다

 

다른 Vue 파일 만들어서 끼워보기

DivCopy.vue 라는 파일 생성하고 원하는 대로 작성하기

 

App.vue 에서 import 하고 components 에 DivCopy 를 사용한다고 작성해야 함

import 진행 후 components 에 이름 적기, template 에 태그 이름으로 DivCopy 사용

 

알아봐야 할 것

script 에 적는 name 이 의미하는 것은 무엇일까

=> 안써도 되지만 프로그램이 파일을 추론하거나 로그를 확인할 때 필요할 수 있음 (작성하는게 좋다)

Vue의 name 옵션은 중요할까

 

Vue 여러개를 링크를 만들어 바꾸어보기

새로운 vue 생성

cd c:/vue

vue create vue-router

cd vue-router

npm install --save vue-router

npm run serve

 

띄우고 싶은 vue 들을 생성

src > views 라는 폴더 안에 생성했음

내용은 다 동일하게 작성

파일 안의 내용은 알아볼 수 있게만 다 작성해두었음

<template>
  <div><h1>IndexPage</h1></div>
</template>

<script>
export default {
  name: "IndexPage",
};
</script>

<style></style>

 

페이지를 넘길 수 있는 js 파일 생성

src > router 라는 폴더 안에 index.js 라는 파일을 생성하여 작성

원하는 페이지를 import 하여 이름을 만들고, 해당 파일을 사용할 경로와 component 도 작성

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: "/boardList", name: "boardList", component: boardList },
  { path: "/main", name: "mainPage", component: mainPage },
  { path: "/login", name: "loginPage", component: loginPage },
  { path: "/join", name: "joinPage", component: joinPage },
];

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

export default router;

 

바깥의 main.js 에 index.js 를 import 하여 사용

index.js 를 router 라는 것으로 export 하기 때문에 router 로 import 하는 듯함 / 알아보자

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 이 내용을 추가

const app = createApp(App);
app.use(router);
app.mount("#app");

 

menu.vue 를 새로 생성하여 router-link 라는 거에 link 달기

router-link 는 a 태그의 역할을 하고 있음

 

※ !!!!!App.vue 에 태그 집어넣기!!!!!!!!!!

<RouterView></RouterView>

 

<li><router-link to="/">IndexPage</router-link></li>
<li><router-link to="/boardList">BoardList</router-link></li>
<li><router-link to="/main">MainPage</router-link></li>
<li class="lir"><router-link to="/join">JoinPage</router-link></li>
<li class="lir"><router-link to="/login">LoginPage</router-link></li>

 

새로고침의 느낌 없이 잘 전환됨, 싱기방기