개념부모가 자식의 UI를 결정, 컴포넌트 재사용성은 유지하고 커스터마이징이 필요한 부분을 분리하기 위함자식컴포넌트가 을 정의부모컴포넌트에서 자식컴포넌트 사이에 or #slotName의 template를 slot으로 보냄name,#을 생략하면 default로 인식부모가 보내는 게 없을 때내용이 표시됨흐름초기 설정 (자식 -> 부모):자식 컴포넌트가 를 정의해.이게 "나는 'header'라는 이름의 슬롯이 있어"라고 선언하는 거야.템플릿 매칭 (부모 -> 자식):부모 컴포넌트가 v-slot:header를 사용해.이건 "나는 'header'라는 이름의 슬롯을 채우고 싶어"라고 하는 거야.데이터 전달 (자식 -> 부모):자식 컴포넌트가 슬롯에 데이터를 제공해: .slot props자식컴포넌트에 props로 추..

0.UI에 대한 디자인을 미리 작성 상세내역 상세페이지 내용 닫기 ## template 내 html정보 작성 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; } ## style 내 css정보 작성 1.UI 상태(state)를 데이터로 저장 (0/1 or true/false) data() { return{ ## ## pop_state: false, } ..

이벤트 핸들러 HTML 클릭 시 코드 실행 JS 제공기능 HTML 속성에 onClick="" 추가 클릭->다루는 데이터를 찾아서 처리(e.g 1증가)->처리된 내용을 html에 반영 Vue 문 HTML 속성에 v-on:click="" or @click="" 추가 클릭->관련된 데이터만 처리 (->자동 리랜더링) 허위매물신고 신고 수: {{ 신고수 }} ## 함수내용 직접 입력 허위매물신고 신고 수: {{ 신고수 }} ## scripts 내에 작성한 함수명으로 처리 methods : { increase() { this.신고수+= 1; } }

Vue의 html 반복문을 통해 여러 태그를 생성가능 횟수를 지정하거나 array,object를 넣어 자료안의 데이터수만큼 반복생성 리스트 요소를 반복 시마다 받아와 내용에 적용 가능 반복요소는 2개까지 적용가능 내용 {{ i }} {{ 작명 }} "

사용목적 - 자주 변경되는 데이터의 자동랜더링을 통한 교체, 하드코딩 방지 등 에서 상기 data의 키값을 불러와 데이터바인딩 내용: {{키값}} 형태로 작성 {{ price1 }} 만원 HTML 속성: :속성="데이터 키값" xx 원룸

1.node 설치 2.npm 확인 3.vue 설치 4.vue cli 설치 5.프로젝트 생성 6.기타 에러 시 1.node 설치 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node 버전확인:node -v 2. npm 설치버전 확인 Node 설치 시 자동설치완료 설치된 npm 버전확인:npm -v 3.vue 설치 npm install vue npm update vue 4.vue cli 설치 npm install -g @vue/cli npm update -g @vue/cli 5.vue 프로젝트 생성 프로젝트 경로로 이동 vue create 커맨드라인에..