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

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가 어떻게 보일지 작성 닫기

1. 이벤트 핸들러 1-1. 버튼 click => 축약방식 js함수명 대신 동작 자체를 넣어도됨 -> "신고수 += 1" 1-2. 버튼 mouseover 함수 안에서 데이터쓸 땐 this.데이터명1-3. 이미지 넣기 절대경로 - http:/ 그냥 넣는다 상대경로 - ./assets/room0.jpg 무조건 ./로 시작한다

1. v-for 반복문 모든 HTML태그에 적용가능하다 ex ) :key의 용도 -반복문쓸 때 꼭 써야한다 -반복문 돌린 요소를 구분하기 위해 씀 1-1. v-for를 활용해 템플릿에 변수출력 menus : [' ', ' ', ' '] 1번 {{ menu }} 2번 {{ menus[i] }} 1-2. 2개의 변수 가능 {{ menu }}​ menu는 배열의 데이터가 되고, i는 인덱스가 된다 -> 2개쓰려면 뒤에 꺼를 key에 넣어줘야함 예제 {{ product }} {{ price1 }}만원 허위매물신고 신고 수 : {{신고수}} {{ products[i] }} {{ price1 }}만원 허위매물신고 신고 수 : {{신고수}} 허위매물신고 신고 수 : {{신고수}}

1. vue 프로젝트 생성 명령 vue create 프로젝트명 App.vue가 메인페이지다. 2. 웹 브라우저로 실행하는 명령 npm run serve 3. 데이터 바인딩 - 자바스크립트 데이터를 HTML에 꽂아넣는 문법 vue의 데이터 보관하는 곳 export default{ name: 'App', data(){ return{ /* [여기에 데이터 보관] */ } }, methods : { 함수명(){ }, }, component: { } } 데이터는 object자료로 저장한다. ==> { 자료이름: 자료내용 } 4. 템플릿에 데이터 넣는법 {{ 데이터이름 }} -> {{ }} 자동 렌더링을 가능하게 해준다. 5. HTML속성도 데이터 바인딩이 가능하다. 1. 데이터 보관 styleColor: 'col..