Vue.js 부모데이터를 자식컴포넌트로 - Props
- 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..
2023. 3. 31.
Vue.js 상세페이지(변수로 구분), 컴포넌트, v-if 추가학습
- 여러 상세페이지 변수로 조작하기 아래 그림과같이 상세페이지가 여러개 있을 수 도 있다. 라우팅과 비슷하다고 볼 수도 있는데, 주소/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..
2023. 3. 30.
React 컴포넌트화(Component) 해서 반복문이용, 이미지도 순서반복
위와같은결과물을 만들기위해 간단한 부트스트랩사용이후 상품 정보에관한 소스를 컴포넌트화해 반복문으로 출력했다. 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..
2022. 1. 12.
