예를들어 App.vue 부모 컴포넌트가 있고

File.vue라는 자식 컴포넌트가 있을 시

부모에 있는 데이터들을 File.vue인 자식에게 Props 시키고싶을때 

<!-- 기본 -->
<File :작명(또는데이터이름그대로)="데이터이름"/>

<!-- Array나 Object 그대로 보내기 -->
<File :데이터이름="[123,456]"/>

<!-- 간단한 문자열들은 v-bind문법없이도 바로 보낼수있다
	글자는 v-bind없이 바로바로 간다 -->
<File 데이터이름="안녕하세요문자자료"/>
<File :데이터이름="12344(숫자자료)"/>

<!-- Object 데이터들을 한번에 간단히 축약해서 보내는법 -->
<File :이름="오브젝트.name" :나이="오브젝트.age"/>

<!-- 이렇게 이름만 써도 됌. 한번에 보내는방법. -->
<File v-bind="오브젝트"/>

<!-- 또는 그냥 이렇게 보내도 똑같음 -->
<File :오브젝트="오브젝트"/>

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그냥 똑같이 쓰면됌