728x90
반응형
1. 컴포넌트란?
▷ 부품으로 정리할 때 component를 사용합니다.
◎ 컴포넌트를 만들어 표시하는 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>컴포넌트를 만들어서 표시하는 예제</h2>
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
var MyComponent = {
template: '<p class="my-comp">Hello</p>'
}
new Vue({
el: '#app',
components: {
'my-component': MyComponent
}
})
</script>
<style>
.my-comp {
width: 300px;
background-color: #ffffe0;
border: solid;
border-color: darkorange;
border-radius: 8px;
padding: 8px;
}
</style>
</body>
</html>(1) HTML부
<my-component></my-component> → 준비된 컴포넌트가 표시됩니다.
(2) script부
<script> var MyComponent = { // var Component 오브젝트명 template: '<p class="my-comp">Hello</p>' } new Vue({ el: '#app', components: { 'my-component': MyComponent // 'Component 태그명' : Component 오브젝트명 } }) </script>
위와 같은 방법으로 사용하면 됩니다.
결과는 아래와 같은 방법으로 출력됩니다.
◎ 컴포넌트의 data를 function으로 만들기(각각 다른 카운팅 하는 컴포넌트) 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>각각 다른 카운팅을 하는 컴포넌트 예제</h2>
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
var MyComponent = {
template: '<p class="my-comp">카운터 <button v-on:click="addOne">추가</button>{{ count }} </p>',
data: function(){
return {
count:0
}
},
methods: {
addOne: function(){
this.count++;
}
},
}
new Vue({
el: '#app',
components: {
'my-component': MyComponent
}
})
</script>
<style>
.my-comp {
width: 300px;
background-color: #ffffe0;
border: solid;
border-color: darkorange;
border-radius: 8px;
padding: 8px;
}
</style>
</body>
</html>
2. props 옵션 : HTML의 태그에서 값을 받아 전달하는 것입니다.
// script 부분 : 카멜 케이스
props: {
myName: String
}
// HTML 부분 : 케밥 케이스
<my-component my-name="철수"><my-component>위의 형식과 같은 방식으로 연결을 해줘야 컴포넌트가 실행됩니다.
my-name과 같은 형식으로 작성해야합니다. my는 변경하면 안됩니다.
◎ 컴포넌트에 값을 전달하는 예제(props 사용)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>컴포넌트에 값을 전달하는 예제</h2>
<div id="app">
<my-component my-name="철수"></my-component>
<my-component my-name="영희"></my-component>
<my-component></my-component>
</div>
<script>
var MyComponent = {
template: '<p class="my-comp">나는 {{myName}}입니다.</p>',
props:{
myName: String
//전달할 매개체는 myName이고 스트링 형입니다.
},
created: function(){
// Vue.js 라이프사이클에서 인스턴스가 작성된 후
if(this.myName == null){
this.myName = "이름없음";
}
}
}
new Vue({
el: '#app',
components: {
'my-component': MyComponent
}
})
</script>
<style>
.my-comp {
width: 300px;
background-color: #ffffe0;
border: solid;
border-color: darkorange;
border-radius: 8px;
padding: 8px;
}
</style>
</body>
</html>script부의 template의 class="my-comp"는 다른 이름으로 변경하면 style 적용이므로 굳이 작성하지 않아도 됩니다.
컴포넌트 연결을 위해서는 굳이 'my-변수'와 같이 작성하지 않아도 위의 html과 연결됩니다.
ex) my, compo 등등
대신 관련된 부분을 모두 바꿔야 합니다.
props는 전달할 매개체의 형태를 지정합니다.
component가 이해하기에는 좀 어렵네요,,ㅎ
위의 예제에서 html부를 수정하고 script의 data만 추가하면 배열이 적용됩니다.
1. html부
<my-component v-for="(item, index) in myArray" v-bind:my-name="item" ></my-component>
2. script부
data: { myArray:['철수','영희','광수','병수','이슬'] },
마지막으로 실습 예제를 풀어보겠습니다!
◎ 컴포넌트를 사용해 1~10까지 출력해 해당 숫자가 짝수인지 홀수인지를 출력하세요
▷ 배열로 받은 숫자의 값을 컴포넌트 안에서 홀수/짝수를 계산하세요(computed 사용)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>컴포넌트를 숫자로 출력</h2>
<div id="app">
<my-component v-for="i in myArray" v-bind:my-num="i"></my-component>
</div>
<script>
var MyComponent = {
template: '<p>{{ result }}</p>',
props:{
myNum: Number,
result: String
},
created: function(){
if(this.myNum % 2 == 0){
this.result = this.myNum + "은 짝수 입니다.";
} else{
this.result = this.myNum + "은 홀수 입니다.";
}
}
}
new Vue({
el:'#app',
data:{
myArray:[1,2,3,4,5,6,7,8,9,10]
},
components:{
'my-component':MyComponent
}
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>컴포넌트를 숫자로 출력</h2>
<div id="app">
<my v-for="i in 10" v-bind:my-num="i"></my>
</div>
<script>
var My = {
template: '<p>{{myNum}} 은 {{myText}} 입니다.</p>',
props:{
myNum: Number,
myText: String
},
created: function(){
if(this.myNum % 2 == 0){
this.myText = "짝수";
} else{
this.myText = "홀수";
}
}
}
new Vue({
el:'#app',
components:{
'my':My
}
})
</script>
</body>
</html>배열을 따로 만들어서 데이터를 입력받거나, for문을 사용하는 두가지 방법 다 사용할 수 있습니다.
컴포넌트가 연결되는 것은 눈으로 확인했지만, 컴포넌트에 대해 확실히 이해하지는 못한 것 같아서 공부를 해서 다시 글을 올려야겠어요!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js ToDo List 만들기 (0) | 2022.12.31 |
|---|---|
| [java script] Vue.js JSON 데이터 다루기 (2) | 2022.12.29 |
| [java script] Vue.js 애니메이션 효과 적용(transition) (0) | 2022.12.28 |
| [java script] Vue.js markdown 에디터 만들기 (0) | 2022.12.28 |
| [java script] Vue.js 데이터 변화(computed, watch)를 이용한 마무리 예 (0) | 2022.12.28 |
