์ปดํฌ๋ํธ?
์ปดํฌ๋ํธ๋ ํ๋ฉด์ ์์ญ์ ๊ตฌ๋ถํ์ฌ ๊ฐ๋ฐํ ์ ์๋ ๋ทฐ์ ๊ธฐ๋ฅ. ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ผ๋ก ํ๋ฉด์ ๊ฐ๋ฐํ๊ฒ ๋๋ฉด, ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ์ ๋์ฌ ๊ฐ๋ฐ์ ์๋๋ฅผ ๋์ผ ์ ์๋ค.
์ธ์คํด์ค๋ฅผ ์์ฑํ๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก Root ์ปดํฌ๋ํธ๊ฐ ๋๋ค.
์ ์ญ ์ปดํฌ๋ํธ ๋ฑ๋ก
Vue.component('์ปดํฌ๋ํธ ์ด๋ฆ', ์ปดํฌ๋ํธ ๋ด์ฉ);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- ์๋์์ ๋ฑ๋กํ ์ปดํฌ๋ํธ๋ฅผ ์ ์ฉ์ํด-->
<app-header></app-header>
<app-content></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//์ ์ญ ์ปดํฌ๋ํธ(์ปดํฌ๋ํธ๋ฅผ ๋ฑ๋ก)
//app-header๋ผ๋ ํ๊ทธ
Vue.component('app-header', {
//template : ์ปดํฌ๋ํธ๊ฐ ํํ๋๋ ๋งํฌ์
์ด๋ ์คํ์ผ
template : '<h1>Header1</h1>'
});
Vue.component('app-content', {
template : '<h2>Header2</h2>'
})
new Vue({
el : '#app' //#:id ์ฐพ์
});
</script>
</body>
</html>