Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- queryset
- vitepwa
- 플로이드워셜
- TypeScript
- Django
- 셀프넘버
- sqld
- js
- 데코레이터
- db
- Javascript
- unionfind
- 알고리즘
- react
- 백준
- 싸피
- pwa적용하기
- 리액트
- SSAFY
- 싸피10기
- PWA
- SQL
- SSAFYcial
- VITE
- Python
- 14658
- git
- QuerySetAPI
- 머신러닝종류
- 싸피셜
Archives
- Today
- Total
Meme's IT
[Vue] Vue Component 사용해보기 본문
# Compenent 사용해보기
1. 컴포넌트 파일 생성
(1) 초기에 생성된 모든 컴포넌트 삭제 (App.vue는 초기화해줌)
<!-- App.vue -->
<template>
<h1>App.vue</h1>
</template>
<script setup>
</script>
<style scoped>
</style>
(2) src/components 안에 myComponent.vue파일 생성
<!-- myComponent -->
<template>
<div>
<h2>myComponent</h2>
</div>
</template>
<script setup>
</script>
<style scoped>
</style>
2. 컴포넌트 등록해보기
(1) App.vue에 myComponent를 등록
<template>
<h1>App.vue</h1>
<myComponent />
</template>
<script setup>
import myComponent from '@/components/myComponent.vue'
</script>
<style scoped>
</style>
- App(부모) - myComponent(자식) 관계 형성
- @ = 'src/' 경로를 뜻하는 약어
3. 재사용 해보기
(1) myComponentItem.vue 만들기
<template>
<p>my component item</p>
</template>
<script setup>
</script>
<style scoped>
</style>
(2) myComponent에 등록해주기
<template>
<div>
<h2>myComponent</h2>
<!-- 재사용 -->
<myComponentItem/>
<myComponentItem/>
<myComponentItem/>
</div>
</template>
<script setup>
import myComponentItem from '@/components/mycomponentitem.vue';
</script>
<style scoped>
</style>
Component의 이름을 지을 때는 규칙을 따라서 하는 것이 권장된다
이름 규칙은 공식문서의 스타일 가이드를 참고
'FrontEnd > Vue' 카테고리의 다른 글
[Vue] Component State Flow(1) Passing Props (0) | 2023.11.08 |
---|---|
[Vue] Virtual DOM (0) | 2023.11.07 |
[Vue] Module과 bundler (0) | 2023.11.07 |
[Vue] SFC build tool (Vite) (0) | 2023.11.07 |
[Vue] Single File Components(SFC) (0) | 2023.11.07 |