🖥 dev-ruby

1. input에 입력한 값 알아내기 사용자가 input에 값을 입력할 때마다 실행됨 @input="$event.target.value" //e.target.value랑 같은거임 2. input에 입력한 값을 데이터에 저장하기 데이터에 등록 data(){ return{ month : 1, } }, 저장하기 사용하기 - {{ }}안에 있으므로 중복해서 {} 안써줘도 됨 {{원룸들[clicked].price * month }} 3. 축약버전 유저가 입력한 값이 month로 저장됨 , 등등에도 적용 가능 4. input값을 숫자로 저장하기 ❗ input에 입력한 값은 전부 문자자료형으로 저장된다 ❗ {{원룸들[clicked].price month }} 여기서 대신 +로 쓰면 input은 문자형으로 저장되기 때..

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..