🖥 dev-ruby

1. $emit() : 부모에게 메세지 주기 부모컴포넌트에서 쓴 자식태그에 @click넣어주기 -> but, 자식의 어딜 눌러도 click이벤트가 발생할 것임 ==> 자식컴포넌트 안의 태그에 @click="$emit('작명데이터', 요청데이터)" 클릭하면 부모에게 메세지가 간다 2. @데이터="" : 부모가 메세지를 받는법 하면 자식에게 모달창열렸니=true 메세지가 전송된다 3. $event : 부모가 자식이 보낸 데이터 쓰는 법 @openModal="모달창열렸니=true; clicked=$event" 자식에서 보낸 '요청한데이터'가 clicked로 전달돼서 openModal을 통해 다시 자식한테 보내준다. 3-1. $emit을 함수 안에서 사용하고 싶으면 methods : { 함수(){ this.$e..

< + Enter vue기본 틀 자동완성 vue코드 웹브라우저 실행 npm run serve webpack - vue코드 웹브라우저 실행 npm run dev

1. 다른 vue파일 import해오기 vue파일 만들어서 HTML만들기 원하는 곳의 script태그 사이에 import 이름 from '경로'; export default안의 component에 쓸 이름: 가져온 이름 => DC : Discount or 같은이름 쓸거면 이름 하나만 적어도됨 => Discount 로 사용하기 2. props : 부모가 가진 데이터를 쓰고 싶을 때 App.vue에 쓰인 는 App의 자식 컴포넌트임 props로 자식에게 데이터 보내는 법 1. 데이터 전송 밑에 데이터 골라서 보내기 or => :작명데이터="보낼데이터" :작명데이터2="보낼데이터2" 여러개 나열 가능 2. 자식은 props로 받은 데이터 등록 props : { 작명한 데이터 : 자료형이..

1. 클릭한 상품 index 상태변경 1. clicked : 0 데이터를 추가해서 2. 3. {{ 원룸들[clicked].title }} 2. v-if v-else-if v-else 문법 if 가 참이 아니면 else if로 넘어가고 그것도 참이 아니면 else로 넘어간다.

1. export/import 문법 쓰는 법 변수를 내보내겠다는 뜻 export default 변수명; 변수를 받겠다는 뜻 import 변수명 from '경로'; 데이터를 내보낼 파일에서 export를 해줘야 다른 파일에서 import해서 쓸 수 있다 1-1. 변수를 import하고 사용하지 않으면 에러가 난다 2. 여러개의 변수를 export/import하는 법 export {변수1, 변수2, ...} import {변수1, 변수2, ...} from '경로'; 3. 데이터 갖다 쓰는법 import data from '경로'; one : data, 3-1. object원하는 항목 사용하기 one[i].title one[i].price 4. HTML태그 안의 속성 데이터 바인딩 :src="" or :hr..

1. 동적인 UI만드는 법 1-1. HTML, CSS로 디자인 해두기 모달창의 기본구조 상세페이지임 상세페이지 내용임 body{ margin: 0; } div { box-sizing: border-box; } .black-bg{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; padding: 20px; } .white-bg{ width: 100%; background: white; border-radius: 8px; padding: 20px; } 1-2. UI의 현재 상태를 데이터로 저장해두기 모달창열렸니 : false 1-3. 데이터에 따라 UI가 어떻게 보일지 작성 닫기