vue.js 기본적인 설치

node js를 다운받고

vscode 터미널에서 npm install -g@vue/cli 입력

설치완료 후 다시 터미널에서 vue create 프로젝트명 입력

프로젝트폴더명으로 새로 오픈한 후 코딩시작

미리보고싶으면 터미널에  npm run serve 입력

반복문

<div class="menu">
    <a v-for="(a,i) in 메뉴들" :key="i"> {{ a }} </a>
  </div>

내용을 데이터바인딩하고싶으면  {{이렇게}}

속성을 데이터바인딩하고싶으면 앞에 : 예를들면 img태그에서 :src 이렇게

이미지 넣을때 require을 써야하는데 외부꺼 가져올때는 require 안붙여도되는듯

<!-- 내용을 데이터바인딩하고싶으면 콧수염두개 {{이렇게}} -->
<!-- 속성을 데이터바인딩하고싶으면 앞에 : 예를들면 img태그에서 :src 이렇게 -->

<div v-for="(원룸들,i) in 6" :key="i" class="onerooms">
    <!-- 이미지 넣을때 require을 써야함 -->
    <!-- <img :src="require('./assets/rooms/room' + i + '.jpg')" :alt="'원룸사진'+ i" class="room_image"> -->
    <!-- 외부꺼 가져올때는 require 안붙여도되네 -->
    <img :src="원룸데이터[i].image" :alt="'원룸사진'+ i" class="room_image">
    <!-- 클릭하면 모달창열렸니를 true로 만들어라 (클릭하면 모달창을 열어라) -->
    <h4 @click="모달창열렸니 = true; 누른거 = i">{{원룸데이터[i].title}}</h4>
    <p>{{원룸데이터[i].price}}원</p>
    <button @click="increase(i)"> 허위매물신고 </button>
    <span> 신고 수 : {{신고수[i]}}</span>
  </div>

Script에서

  // data 데이터바인딩을 위한 데이터 저장통! 중요하고 자주 바뀌는 데이터들을 쓰는곳

  // methods = 함수만드는공간

  // 컴포넌트 components를 만들었다면 쓰겠다고 등록해야함

export default {
  name: 'App',
  // data 데이터바인딩을 위한 데이터 저장통
  data(){
    }
  },
  // methods = 함수만드는공간
  methods : {
    }
  },
  // 컴포넌트 components를 만들었다면 쓰겠다고 등록해야함
  components: {
  }
}

Style은 

css그냥 똑같이 쓰면됌