- Props 1)Props보낼 떄 다양한 자료 입력이 가능하다. 그리고 직접 데이터 입력도 가능하다. //혹은 배열등 다 가능 // data="문자자료" // :data="숫자자료: 그리고 : 유무에 따라 문자냐 숫자냐 자료형의 차이가 있다. 2)object자료형 한번에 보내거나, 각각 보내거나 둘다 가능하다. - custom event 1)props로 보낸 데이터는 수정하면 안된다. (Read-only) 2)부모컴포넌트의 데이터를 수정하고 싶으면 custom event를 쓴다. 부모에게 $emit('작명',데이터)을 써서 메세지를 보낸다. CardList.vue {{ oneroom.title }} ........ App.vue의 하위 컴포넌트인 CardList.vue에서 부모컴포넌트의 데이터를 수정하..

- Props 1)데이터는 한 곳에 보통 보관한다 (App.vue 같은곳) 그리고 필요하면 가져다 쓴다. 2)v-bind (축약은 :)를 이용해 이름 : "props할 데이터" 형식으로 넘겨준다. 3)props받은 컴포넌트쪽에 props등록을 해준다. 받은데이터이름 : 자료형인데 자료형은 디버깅용이라 틀려도 되지만 맞춰주도록 하자 ...... {{ a }} ....... export default { name: 'App', data(){ return{ modal : false, // 닫힌 상태와, 열린상태 2가지 표현 0과1로 혹은 true,false alert:[0,0,0], price1 : 60, price2 : 70, price3:80, prices:[60,70,80], 스타일 : 'color:bl..

- 여러 상세페이지 변수로 조작하기 아래 그림과같이 상세페이지가 여러개 있을 수 도 있다. 라우팅과 비슷하다고 볼 수도 있는데, 주소/0, 주소/1 주소/2 와같이 되어있을 때 뒤에 변수 0,1,2만 바꿔주면 하나의 템플릿으로 여러 페이지의 데이터 내용을 구현할 수 있다. {{ oneroom[roomNumber].title }} {{ oneroom[roomNumber].content}} 닫기 {{ a }} {{ i }} {{ a.title }} {{ a.price }}원 ....... data(){ return{ modal : false, // 닫힌 상태와, 열린상태 2가지 표현 0과1로 혹은 true,false oneroom:data, roomNumber:0, //import 해온것 } 이와같이 dat..

box.js export default function Layout(){ return } function R1(props){ // return( // hihi {props.ramen1} // ) if(props.ramen1===0){ return }else if(props.ramen1===1){ return }else if(props.ramen1===2){ return } } 위와 같이 사용할 수 있다. box.js export default function Layout(){ return } 이게 기본적인 형태라고 보면 저 Layout안에다가 새로운 컴포넌트를 따로 만들어서 쓰고싶다. 다른 페이지에 만들어도 되겠지만 한페이지에서 불러오려면 function R1(props){ // return( // hi..

위와같은결과물을 만들기위해 간단한 부트스트랩사용이후 상품 정보에관한 소스를 컴포넌트화해 반복문으로 출력했다. export default [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 } ] 이게 데이터정보 import Data from './data.js' function App() { let [shoes,shoes변경] = u..