(3) Vue로 만드는 직방/인스타그램 웹앱 강의

https://youtu.be/T4N9wjx7_E4

 

깃에 올릴라했는데 안대서 친구가 같은 오류를 경험해봤다고 알려줬다.

https://komodor.com/learn/how-to-fix-fatal-refusing-to-merge-unrelated-histories-error/

How to fix 'fatal: refusing to merge unrelated histories' Git error | Komodor

git pull origin master --allow-unrelated-histories

이러고 push하니까 됐다!!!

 

상단 Nav 메뉴 만들기

App.vue

> template 부분에 Nav 추가

  <div class="menu">
    <a>Home</a>
    <a>Products</a>
    <a>About</a>
  </div>

 

>style 부분에 추가

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: white;
  padding: 10px;
}

 

그리고

npm run serve

 

 

반복적인 요소 짧게 출력

> 반복문

<태그 v-for="작명 in 몇회" :key="작명">
(:key="작명"도 필요)->안 쓰면 에러남

-> Vue 문법을 쓰면 비슷한 HTML들 만들 때 코드 한 줄로 끝낼 수 있다!

-> 몇회 자리에 데이터도 집어넣기가 가능하다.

 

메뉴 생성에 필요한 정보들을 data() 란에 저장

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      메뉴들: ['Home', 'Shop', 'About'],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};

Vue 반복문 특)

> array/object 집어넣기 가능 => 자료 안의 데이터 갯수만큼 반복됨

> 작명한 변수는 데이터 안의 자료가 됨

>> 변수 작명은 2개까지 가능하다. v-for="(a,i) in 메뉴들" 

=> 괄호 안의 왼쪽 변수는 array 내의 데이터, 오른쪽 변수는 1씩 증가하는 정수

    <a v-for="작명 in 메뉴들" :key="작명">{{ 작명 }}</a>

 

1. 자료 안의 데이터 갯수만큼 반복됨

2. 작명한 변수는 데이터 안의 자료가 됨

 

:key="" 의 용도

> 반복문 쓸 때 꼭 써야 함

> 반복문 돌린 요소를 컴퓨터가 구분하기 위해 씀

ex) :key="a" => a는 반복문 돌면서 변하는 숫자/문자

 

숙제

> 상품목록도 반복문으로 축약하기

  <div v-for="(a,i) in products" :key="i">
    <h4>{{ a }}</h4>
    <p>50 만원</p>
  </div>