Just Do It

이미지 넣기상대경로 이미지 넣을 때는 src 폴더 아래 이미지 파일을 저장해두고 div>    img src="./assets/room0.jpg" class="room-img">    h4>{{ products[0] }}h4>    p>50 만원p>    button @click="increase">허위매물신고button> span>신고수 : {{ 신고수[0] }}span>  div>  div>--> ./ (현재 경로라는 의미)로 시작하는 경로를 적어준다. 모달창 만들기동적인 UI 만드는 법 0. HTML CSS로 디자인 하기1. UI의 현재 상태를 데이터로 저장하기2. 데이터에 따라 UI가 어떻게 보일지 작성하기차례대로 해보자.0. HTML CSS로 디자인 하기  div class="black-bg">..

이벤트 핸들러 : HTML 클릭시 코드 실행하는 것  div>    h4>{{ products[0] }}h4>    p>50 만원p>    button v-on:click="자바스크립트~~">허위매물신고button> span>신고수 : 0span>  div>--> v-on:click="자바스크립트" 혹은 @click="자바스크립트" 로 사용하면 된다.이 때 신고수는 중요 데이터니까 밑에 정의해주자.export default {  name: 'App',  data() {    return {      신고수 : 0,      메뉴들 : ['Home', 'Shop', 'About'],      products : ['역삼동원룸', '천호동원룸', '마포구원룸']    }  },  components: {  ..

v-for 문법을 쓰면 반복이 가능하다.template>   div class="menu">    a v-for="aaa in 3" :key="aaa">Homea>  div>template>--> aaa in 3 에서 aaa는 내가 정의한 변수 이름이고, 3은 3번 만큼 반복하라는 의미이다.그런데 이렇게 하면 문제가 생긴다. 똑같은 Home만 3개가 생기는 것, 해결 방법은?저 3 자리에 내가 정의한 데이터를 넣을 수 있다. export default {  name: 'App',  data() {    return {      메뉴들 : ['Home', 'Shop', 'About'],      products : ['역삼동원룸', '천호동원룸', '마포구원룸']    }  },  components: {..

데이터 바인딩 : JS 데이터를 HTML에 꽂아 넣는 문법1. 쌩자바스크립트 스타일 데이터 바인딩document.getElementById().innerHTML = ??2. 뷰 데이터 바인딩{{ 데이터 이름  }}ex )export default {  name: 'App',  data() {    return {      price1 : 60    }  },  components: {  }}--> 데이터를 이렇게 저장해놓고 template>  div>    h4>XX 원룸h4>    p>{{ price1 }} 만원p>  div>  div>    h4>XX 원룸h4>    p>XX 만원p>  div>template>--> {{ }} 안에 변수 이름을 써주면 끝! * 이 문법을 왜, 언제 쓰는가?1. HTM..