[Vue] 코딩애플 강의 정리

[0-1강]

1. 미리 보고 싶을 때
   npm run serve

2. 프로젝트 생성할 때
   vue create 프로젝트명

---

App.vue : 메인페이지
node_modules : 프로젝트에 쓰이는 라이브러리들
src : 소스코드 담는 곳 ~ 코드 짜는 공간 ~
public : html + 기타 파일 보관
package.json : 설치한 라이브러리 버전, 프로젝트 설정 기록

[2강]

데이터 바인딩 : JS 데이터를 html에 꽂아넣는 문법

document.getElementById().innerHTML=??
  //쌩자바스크립트 스타일 데이터 바인딩

  //vue 에서는 
  data(){
    return { ~ 여기에 데이터 보관 ~
           데이터는 object(자료이름 : 자료내용)로 저장}
  },
  //데이터 보관함부터 만들어 주고
  
  // 데이터를 html에 꽂아넣고 싶으면 
     {{ 데이터이름 }}

🧐예시

<template>
  <div>
    <h4>XX 원룸</h4>
    <p>{{price1}} 만원</p>
    // {{ 데이터 이름 }}
  </div>
</template>

<script>

export default {
  name: 'App',
  
  data(){
    return {
      price1 : 60,
      price2 : 70,
    }
  },
  // 데이터 보관
  
  components: {
  }
}
</script>

😁 데이터 바인딩 왜 하냐 ~

1. html에 하드코딩 해 놓으면 변경 어려움

<p>70 만원</p>

2. (중요) Vue의 실시간 자동 렌더링 사용 가능

data를 변경하면 data와 관련된 html에 실시간으로 반영됨
ex. 쇼핑몰에서 필터 적용하면 화면 바뀌는 거
{{ 데이터 이름 }} <- 자동 렌더링하려면 이거 쓰기
(..) html 속성도 데이터 바인딩 가능
: 속성 = "데이터 이름"

<h4 class="red" :style="스타일">XX 원룸</h4>
.
.
data(){
    return {
      스타일 : 'color : blue',
    }
  },

❗ ❗ 자주 변할 것 같은 데이터 들은 데이터로 보관하고 html에 {{ }}로 꽂아 넣기

바뀔 것 같지 않은 데이터는 바인딩할 필요 없음 ex. 쇼핑몰 이름

---

[3강]

padding : 내용과 테두리 사이의 여유 공간
margin : 요소 사이의 여백. 즉, 테두리 밖의 공간

---

Vue의 html 반복문

<태그 v-for = "작명 in 반복횟수" :key="작명">

    <a v-for="name in 3" :key="name">Home</a>
// home만 3개 생김

vue 반복문은 array/object 집어넣기 가능

-> 그럼 자료안의 데이터 갯수만큼 반복됨
-> 작명한 변수는 데이터안의 자료가 됨

    <a v-for="a in 메뉴들" :key="a"> {{ a }} </a>
// 반복문이 돌면서 변하는 숫자/문자 ↑ , ex)0,1,2...
// 메뉴들 갯수만큼 반복 (=3)
// 첫번째 a = Home
   두번째 a = Shop
   세번째 a = About

data(){
    return {
      메뉴들 : ['Home','Shop','About'],
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
    }
  },

:key="작명" 왜 써!
-반복문 쓸 때 꼭 써야함
-반복문 돌린 요소를 컴퓨터가 구분하기 위해서 사용

-> 변수 작명 2개까지 가능

 <a v-for="(a,i) in 메뉴들" :key="i"> {{ a }} </a>
// a : array내의 데이터  
// i : 1씩 증가하는 정수

[4강]

정리했는데 날라감 ㅠㅠ

[5강]

동적인 UI 만드는법
1. UI 현재 상태를 데이터로 저장해둠
2. 데이터에 따라 UI가 어떻게보일지 작성

예시) 모달창 만들기

<template>

<div class = "black=bg" v-if="모달창열렸니 == true">
  //v-if "조건식" 조건식이 참일 때만 HTML 보여줌
  <div class = "white-bg">
    <h4>상세페이지</h4>
    <p> 내용 </p>
  </div>
</div>


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




 <div>
    <img src="./assets/400.jpg">
    <h4 @click="모달창열렸니=true">{{products[0]}}</h4>
    // 상품제목을 click하면 모달창 열리게 
    <p>50만원</p>
    <button @click="신고수[0]++">허위매물신고</button> 
    <span>신고수 : {{신고수[0]}}</span>
  </div>
   <div>
    <h4>{{products[1]}}</h4>
    <p>60만원</p>
    <button @click="신고수[1]++">허위매물신고</button> 
    <span>신고수 : {{신고수[1]}}</span>
  </div>
  <div>
    <h4>{{products[2]}}</h4>
    <p>70만원</p>
    <button @click="신고수[2]++">허위매물신고</button> 
    <span>신고수 : {{신고수[2]}}</span>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){ // state
    return {
      모달창열렸니 : true,
      신고수 : [0,0,0],
      메뉴들 : ['Home','Shop','About'],
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
    }
  },
  methods:{
    increase(){
      this.신고수 +=1;
    }
  },

  components: {
  }
}
</script>

<style>

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;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px; 
}
.menu a {
  color:white;
  padding:10px;
}

</style>

[6강]

import/export 하기!

export default 변수명
import 변수명 from '파일의 경로'

여러가지 파일을 내보내고 싶을 때 !
export{변수1, 변수2}
improt{변수1, 변수2} from 경로

<template>

<div class = "black-bg" v-if="모달창열렸니 == true">
  <div class = "white-bg">
    <h4>상세페이지</h4>
    <p> 내용 </p>
    <button @click="모달창열렸니=false">닫기</button>
  </div>
</div>

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

 <div>
    <img :src="원룸들[0].image">
    <h4>{{원룸들[0].title}}</h4>
    <p>{{원룸들[0].price}}</p>
    // html 태그안의 속성 데이터바인딩은 :어쩌구
    // html 태그안의 내용 데이터바인딩은 {{어쩌구}}
  </div>
   
</template>

<script>

import data from './assets/oneroom.js';

export default {
  name: 'App',
  data(){
    return {
      원룸들 : data,
      모달창열렸니 : false,
      신고수 : [0,0,0],
      메뉴들 : ['Home','Shop','About'],
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
    }
  },
  methods:{
    increase(){
      this.신고수 +=1;
    }
  },

  components: {
  }
}
</script>

<style>

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;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px; 
}
.menu a {
  color:white;
  padding:10px;
}

</style>