snowdeer's Code Holic
Vue.js로 화면을 띄우면 기본적으로 상하좌우 8px의 여백이 있습니다.
아래의 코드를 이용해서 여백을 없앨 수 있습니다.
위치는 App.vue에 넣어도 되고, public/index.html에 넣어도 되는데 후자가 더 깔끔한 위치라고 생각합니다.
<style>
body {
margin: 0px;
}
</style>
emit는 컴포넌트에서 발생한 이벤트를 상위 부모에게 전달하는 키워드입니다.
다음과 같이 script 코드에서 이벤트를 발생하는 방법과 template 코드에서 이벤트를 발생시키는 2가지 방법이 있습니다.
<template>
<h2>Child Component</h2>
<button @click="onClicked">Emit from script</button>
<button @click="$emit('event2', 2)">Emit from template</button>
</template>
<script>
export default {
emits: ["event1", "event2"],
setup(props, context) {
const { emit } = context;
const onClicked = () => {
emit("event1", 10);
};
return {
onClicked,
};
},
};
</script>
emit는 getCurrentInstance()를 이용해서도 획득할 수 있었습니다. 기존에는 useContext를 이용해서 획득할 수 있었는데, Vue 3.2.0 버전부터 useContext는 deprecated 되었습니다.
import { getCurrentInstance } from "vue";
export default {
emits: ["event1", "event2"],
setup() {
const { emit } = getCurrentInstance();
const onClicked = () => {
emit("event1", 10);
};
return {
onClicked,
};
},
};
<script setup>
import { defineEmits } from "vue";
const emit = defineEmits(["toggle-drawer"]);
const toggleDrawer = () => {
emit("toggle-drawer");
};
</script>
Routing 기능은 특정 페이지로 이동하는 기능입니다.
npm install vue-router@4 또는 yarn add vue-router@4
다음은 Vue Router를 설치하면 기본적으로 생성되는 예제입니다. <router-link> 태그 안에 Routing된 페이지가 출력됩니다.
Routing을 위해 <a> 태그를 이용해도 되지만, 이 경우 전체 페이지가 리로딩이 되는데, <router-link>를 이용할 경우 전체 페이지 리로딩 없이 <router-link> 안에 Routing된 페이지를 출력할 수 있습니다.
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
Routing을 원하는 경로를 router/index.js에 추가하면 됩니다.
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import AboutView from "../views/AboutView.vue";
const routes = [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/about",
name: "about",
component: AboutView,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");
간단한 Todo App을 만든다고 할 때 Router 기능 사용 예제입니다.
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import TodoListView from "../views/TodoListView.vue";
import TodoView from "../views/TodoView.vue";
import AboutView from "../views/AboutView.vue";
const routes = [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/about",
name: "about",
component: AboutView,
},
{
path: "todos",
name: "todos",
component: TodoListView,
},
{
path: "todos/:id",
name: "todo",
component: TodoView,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
router.push() 함수를 이용한 Routing
...
<script>
setup() {
...
const router = useRouter();
const moveToPage = (todoId) => {
router.push(`/todos/${todoId}`);
};
}
</script>
...
<script>
setup() {
...
const router = useRouter();
const moveToPage = (todoId) => {
router.push({
name: "Todo",
params: {
id: todoId
}
});
};
}
</script>
Vue는 SFC(Single-File Components)로 되어 있습니다. 하나의 파일에 JavaScripts, Template, Style 모두 저장되어 있어 관리가 용이합니다.
하나의 vue 파일의 구조는 다음과 같습니다. Vue 공식 홈페이지에서 더 자세히 확인할 수 있습니다
<script>
export default {
data() {
return {
greeting: 'Hello World!'
}
}
}
</script>
<template>
<p class="greeting"></p>
</template>
<style>
.greeting {
color: red;
font-weight: bold;
}
</style>
순서는 크게 상관은 없지만, Vue 공식 홈페이지 기준으로는 script, template, style 순으로 배치합니다.
Vue 개발시 주로 vscode에 Vetur 플러그인을 많이 사용할텐데, 빈 문서에서 vue를 타이핑하고 엔터를 치면 Scaffolding 기능을 통해 다음과 같은 형태로 기본 문서가 만들어집니다.
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
이 부분을 공식 Vue 가이드 문서와 같은 형태로 변경하려면 다음과 같은 방법으로 해야 합니다.
현재 개발하는 프로젝트의 루트 디렉토리에서 .vscode/vetur/snippets 디렉토리 아래 vue3-default.vue 파일을 생성하고 아래 내용을 채웁니다.
<script setup> </script> <template> </template> <style scoped> </style>
그 다음 vscode를 재실행하면 새로 추가한 Scaffold를 선택해서 초기 코드를 생성할 수 있습니다.
기본적으로 Material Design은 App Bar와 Content로 이루어집니다.
여기에 Navigation Drawer가 추가되기도 합니다.
먼저 App Bar와 Content로 이루어진 레이아웃입니다.
<template>
<v-app ref="app">
<v-app-bar></v-app-bar>
<v-main></v-main>
<v-footer></v-footer>
</v-app>
</template>
이 중에서 App Bar는 다음과 같은 요소로 구성되어 있습니다.
v-app-bar로 생성되는 전체 영역 컨테이너v-app-bar-nav-icon로 추가v-app-bar-titlev-btn iconv-btn iconApp Bar 태그 안에 v-btn icon 태그를 추가하면 자동으로 오른 정렬되어 추가가 됩니다. Overflow menu도 버튼의 아이콘만 다른 동일한 버튼입니다.
<template>
<v-app ref="app">
<v-app-bar></v-app-bar>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>AppBar Title</v-toolbar-title>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
<v-main></v-main>
<v-footer></v-footer>
</v-app>
</template>
