안녕하세요~ 오늘은 Vue.js 컴포넌트와 props에 대해 알아보겠습니다.
Vue.js는 웹 개발을 위한 자바스크립트 프레임워크로, 컴포넌트 기반 아키텍처를 사용합니다.
컴포넌트는 재사용 가능한 코드 조각으로, 각각의 컴포넌트는 독립적으로 작동하며, 다른 컴포넌트와 상호작용할 수 있습니다. 이때, props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 방법입니다. 이를 통해 컴포넌트 간에 데이터를 공유하고, 코드의 재사용성을 높일 수 있습니다. 이제부터 Vue.js 컴포넌트와 props에 대해 자세히 알아보겠습니다.
1. component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<app-footer></app-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 전역 컨포넌트
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
Vue.component('app-content', {
template: '<div>app-content</div>'
});
new Vue({
el : '#app',
// 지역 컴포넌트 등록방식
components: {
'app-footer': {
template : '<footer>footer</footer>'
}
}
});
</script>
</body>
</html>
위 코드는 Vue.js를 이용한 웹 애플리케이션의 기본 구조를 나타내고 있습니다.
Vue.js는 컴포넌트 기반의 웹 프레임워크로, 이를 이용해 재사용성이 높은 UI를 만들 수 있습니다.
전역 컴포넌트와 지역 컴포넌트 등록 방식을 모두 사용하여 각각의 컴포넌트를 구성하고 있습니다. 전역 컴포넌트는 애플리케이션 전체에서 사용되는 컴포넌트이며, 지역 컴포넌트는 특정 컴포넌트 내에서만 사용되는 컴포넌트입니다. 이렇게 구성된 컴포넌트들은 데이터를 주고 받으며, 필요한 부분만 렌더링하여 성능을 최적화합니다.
2. props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<app-header v-bind:propsData="message"></app-header>
<app-content v-bind:prosNumData="num" v-bind:propsData="message"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: '<h1>{{ propsData }}</h1>',
props: ['propsData']
}
var appContent = {
template: '<div>{{ propsNumData }}</div>',
props: ['propsNumData']
}
new Vue({
el : '#app',
components: {
'app-header': appHeader,
'app-content' : appContent
},
data: {
message: 'hi',
num: 10
}
})
</script>
</body>
</html>
app-header와 app-content라는 두 개의 컴포넌트로 구성되어 있습니다.
app-header 컴포넌트는 부모 컴포넌트에서 받은 propsData 값을 출력하고, app-content 컴포넌트는
부모 컴포넌트에서 받은 propsNumData와 propsData 값을 출력합니다.
감사합니다.
https://www.inflearn.com/course/age-of-vuejs/dashboard
Vue.js 시작하기 - Age of Vue.js - 인프런 | 강의
Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요., [사진] Vue.js 시작하기,Ag
www.inflearn.com
'개발 > vue.js' 카테고리의 다른 글
| vue.js 템플릿 문법 바인딩, v-if, v-show (1) | 2023.10.21 |
|---|---|
| vue.js router 페이지 이동 사용 방법 (0) | 2023.10.14 |
| vue.js 같은 컴포넌트 레벨 통신방법 방법 (0) | 2023.10.14 |
| vue.js instance 와 event-emit 이해하기 (0) | 2023.10.12 |
| vue.js 시작하기 (1) | 2023.10.09 |