component 문법을 사용하면 긴 HTML을 한 단어로 깔끔하게 줄일 수 있다. 생성, 작성, import, 등록, 사용의 스텝으로 한다. src 폴더 안에 DiscountBanner.vue 파일을 생성한다 Discount.vue 에 html작성 ( < 열고 엔터치면 vue 템플릿 자동생성) <template>...

v-if=”조건식” 조건식이 참일 때 보여짐 v-else-if v-if=”조건식”이 참이 아니면 실행해주세요 v-else 위에거가 모두 참이 아니면 실행해주세요 <div v-if="1==2"> 안녕하세요 </div> <div v-else-if="1==3"> 위에거가 참이 아니면 실행해주세요 </div>...

누른거 라는 변수를 데이터에 넣고 리스트의 제목을 누를때마다 누른거의 값을 바꿔주고 모달을 띄워준다. <template> <div class="black-bg" v-if="모달창열렸니==1"> <div class="white-bg"> <img :src="원룸들[누른거].image" clas...

oneroom.js 파일에 있는 데이터를 App.vue내 data()로 가져오기 oneroom.js 파일에서 App.vue로 변수를 보내고 싶을때 import / export 문법을 사용한다. export default 내보내기 할 파일에서 내보내기 할 변수를 export 한다. var apple = 10; export default apple ...

v-if=”조건식” 안에 있는 조건식이 참일때만 보여진다. ui 만드는 법칙 필요한 ui를 미리 만들어놓는다. ui의 현재 상태를 데이터로 저장해놓는다. 데이터에 의해서 모달창이 어떻게 보일지 작성한다. 모달창 스위치(데이터)를 만들어 놓고, 스위치를 변경하는 방법으로 기능 개발을 한다. 모달 v-if="모달창열렸니==1" 속성...

이미지 경로 이미지는 src/assets/ 폴더 안에 넣는다. <img src="./assets/room0.jpg" class="room-img"> 이미지 경로에 변수 사용 이미지에 변수를 사용할 때에는 require 함수를 이용한다. <img :src="require(`@/assets/room${i}.jpg`)" class=...

click event binding v-on:click=”script” @click=”script” 두 가지 문법 <button v-on:click="자바스크립트~~">허위매물신고</button> <button @click="자바스크립트~~">허위매물신고</button> 버튼을 클릭하면 신고...

v-for v-for=”작명 in 몇번반복” :key=”작명” :key 속성은 반복문 돌릴 때 꼭 필요하다. 반복한 요소들을 각각 구분짓기 위한 속성이다. <a v-for="작명 in 3" :key="작명">Home</a> data를 활용한 v-for 3의 자리에는 데이터를 넣을 수가 있음 메뉴들의 갯수만큼 반복됨 작명한...

Vue Data binding 뷰의 실시간 자동 렌더링 기능을 이용하려면 데이터 바인딩을 적극 활용하면 된다. Vue는 data가 변경되면 data와 관련된 HTML도 실시간으로 반영(재 랜더링)된다. 자주 변하는 데이터들은 데이터로 보관하고 HTML에 {{꽂아넣는다}} 데이터 바인딩 Vanilla JS 문법 document.getElemen...

1. 다운로드 node js vs code node.js 를 설치하면 npm을 이용할 수 있다. npm은 각종 웹 개발 라이브러리들을 쉽게 이용할 수 있게 도와주는 패키지 매니저다. (yarn도 마찬가지) npm으로 vue cli를 설치한다. (vue 프로젝트 생성을 빠르게 도와주는 라이브러리) 2. vue/CLI 설치 vs code...