실행은 src로 해야 하는데 매번 만들기 귀찮으니깐 프로젝트 마다 src를 백업 한뒤에 복사 해서 src로 만들어서 실행 할 꺼임
* 중첩 컴포넌트
-컴포넌트들을 조합하여 하나의 애플리케이션을 개발.
-이때 각 컴포넌트들간의 계층구조(부모/자식)가 생성.
속성 값을 이용해서 부모의 값을 자식에게 전달
자식은 props를 이용해서 뽑음
import 받아서 component로 등록 이름으로 태그로 해서 msg 등록
props에서 msg과 타입을 선언함
자식에서 msg로 부를 수 있음
src_01_basic2
App.vue
<template>
<div>
부모 컴포넌트 값
<HelloWorld msg = "부모에서 전달 되는 값"/>
<!-- 3. 자식 컴포넌트에 속성으로 데이터 전달 -->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'; //1. import
export default {
name: 'App',
components:{
HelloWorld //2. 컴포넌트 등록 => <HelloWorld> 로 사용
}
}
</script>
<style>
</style>
HelloWorld.vue
<template>
<div>
자식 컴포넌트<br>
받은 데이터 {{ msg }}
<!-- 5. props 데이터 사용 -->
</div>
</template>
<script>
export default {
name: 'HelloWorld', //컴포넌트 이름
props:{ //4. 부모로 받는 속성 데이터
msg:String
}
}
</script>
<style scoped>
</style>
순서대로 진행됨
* data 속성
-컴포넌트내의 로컬 상태 정보를 저장하기 위하여 data 옵션 사용 가능.
-주의할 점은 반드시 함수 형태로 작성해야 된다.
data라는 키를 써서 function 만들고 리턴을 json 오브젝트로 함
리턴된 값을 template에서 사용가능
App.vue
<template>
<div>
부모 컴포넌트의 로컬값 : {{ x }}, {{ y }}
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'; //1. import
//로컬 상태를 저장하는 data옵션은 반드시 함수로 지정함(arrow 함수도 가능)
data: function(){
return{ //json 오브젝트 리턴
x:"홍길동",
y:"100",
}
}//data end
}
</script>
App.vue
<template>
<div>
{{ z[0] }}
{{ k.aa }}
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'; //1. import
//로컬 상태를 저장하는 data옵션은 반드시 함수로 지정함(arrow 함수도 가능)
data: function(){
return{ //json 오브젝트 리턴
z:[10,20,30],
k:{aa:'hong', bb:30},
}
}//data end
}
</script>
components/Person.js
export class Person{ //import 하는 곳에서 {} 사용
constructor(u, a){
this.username = u;
this.age = a;
}
getUserName(){
return this.username;
}
getAge(){
return this.age;
}
}
App.vue
<template>
<div>
{{ p.getUserName() }}
</div>
</template>
<script>
import {Person} from './components/Person';
//로컬 상태를 저장하는 data옵션은 반드시 함수로 지정함(arrow 함수도 가능)
data: function(){
return{ //json 오브젝트 리턴
p:new Person("aaa",20) //component/Person.js import
}
}//data end
}
</script>
src_01_basic2_multiComponent
vue.config.js 수정
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
vue이름이 단일 단어면 안되기 때문에 그것을 허용하기 위해 수정한 것
App.vue
<template>
<div id="app">
부모컴포넌트 <br>
<HelloWorld msg="aaa"/>
<Happy msg="이순신"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import Happy from './components/Happy'
export default {
name: 'App',
components: {
HelloWorld,
Happy
}
}
</script>
HelloWorld.vue
<template>
<div>
자식 컴포넌트 hello{{ msg }}
</div>
</template>
<script>
export default {
name:'HelloWorld',
props:{
msg:String
}
}
</script>
Happy.vue
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
name:'Happy',
props:{
msg:String
}
}
</script>
App.vue
<template>
<div id="app">
<!-- 숫자, boolean, 객체, 배열 등은 v-bind:속성명 또는 :속성명을 사용하여 전달함 -->
<HelloWorld
v-bind:test=10
/>
</div>
</template>
HelloWorld.vue
<template>
<div>
{{ test }}
</div>
</template>
<script>
export default {
name:'HelloWorld',
props:{
test:String
}
}
</script>
props에서 String으로 받든 Number로 받든 자동 형변환이 되서 상관 없음
src_02_exam1
src/assets/image에 이미지 들 넣음
App.vue
<template>
<div id="app">
BookList <br>
<BookList/>
</div>
</template>
<script>
import BookList from './components/BookList.vue'
export default {
name: 'App',
components: {
BookList
}
}
</script>
BookList.vue
<template>
<div>
<img src='../assets/image/a.jpg'/>
</div>
</template>
<script>
export default {
}
</script>
BookList.vue
<template>
<div>
<h1>도서 목록</h1>
<ul>
<li>
<img src='../assets/image/a.jpg' width="100" height="100"/>위험한식탁
</li>
<li>
<img src='../assets/image/b.jpg' width="100" height="100"/>공부의 비결
</li>
<li>
<img src='../assets/image/c.jpg' width="100" height="100"/>오메르타
</li>
<li>
<img src='../assets/image/d.jpg' width="100" height="100"/>행복한 여행
</li>
<li>
<img src='../assets/image/e.jpg' width="100" height="100"/>해커스 토익
</li>
<li>
<img src='../assets/image/f.jpg' width="100" height="100"/>도로 안내서
</li>
</ul>
</div>
</template>
src_03_props1_arrayOfStrings
App.vue
<template>
<div id="app">
<HelloWorld username="홍길동" age="20" my-address="서울"/>
<!-- 자식 컴포넌트에 속성을 이용한 데이터 전달
my-address같은 케밥 표기법으로 넘기면 반드시 받는 쪽은 myAddress같은 카멜 표기법을 사용받아서 사용함
-->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
</style>
HelloWorld.vue
<template>
<div>
{{ username }}
</div>
</template>
<script>
export default {
name:'HelloWorld',
props:{
username:String
}
}
</script>
<style>
</style>
HelloWorld.vue
<template>
<div>
{{ username }}
{{ age }}
{{ myAddress }}
</div>
</template>
<script>
export default {
name:'HelloWorld',
props:{
username:String,
age:String,
myAddress:String
}
}
</script>
my-address:String 이렇게 하면 에러남
src_03_props1_arrayOfStrings2
props:['username', 'age', 'myAddress'] //속성명 나열props를 이렇게 해도 됨
src_03_props1_arrayOfStrings3
App.vue
<template>
<div id="app">
부모컴포넌트 <br>
<HelloWorld
username="홍길동"
v-bind:age="20"
my-address="서울"
v-bind:isMarried="false"
v-bind:phones="[100,200,300]"
v-bind:author="{
name:'aaa',
company:'google.com'
}"
/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
</style>
HelloWorld.vue
<template>
<div>
{{ username }}<br>
{{ age }}<br>
{{ myAddress }}<br>
{{ isMarried }}<br>
{{ phones }}<br>
{{ author }}<br>
</div>
</template>
<script>
export default {
name:'HelloWorld',
props:{
username:String,
age:Number,
myAddress:String,
isMarried:Boolean, //주의
phones:Array, //배열객체
author:Object //객체
}
}
</script>
<style>
</style>
HelloWorld.vue
<template>
<div>
{{ username }}<br>
{{ age + 10}}<br>
{{ myAddress }}<br>
{{ isMarried==false }}<br>
{{ phones[0]==100 }}<br>
{{ author.name }}<br>
{{ author.company }}<br>
</div>
</template>
'코딩공부 > vue' 카테고리의 다른 글
| 3/29vue 시작 (0) | 2023.03.29 |
|---|---|
| 3/29 (0) | 2023.03.29 |
| 3/28 (0) | 2023.03.28 |
| 3/24 ECMAScript 6 (0) | 2023.03.24 |
