깃에 올릴라했는데 안대서 친구가 같은 오류를 경험해봤다고 알려줬다.
https://komodor.com/learn/how-to-fix-fatal-refusing-to-merge-unrelated-histories-error/
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>
'STUDY > Vue.js' 카테고리의 다른 글
(6) Vue로 만드는 직방/인스타그램 웹앱 강의 (0) | 2022.05.21 |
---|---|
(5) Vue로 만드는 직방/인스타그램 웹앱 강의 (0) | 2022.05.21 |
(4) Vue로 만드는 직방/인스타그램 웹앱 강의 (0) | 2022.05.20 |
(2) Vue로 만드는 직방/인스타그램 웹앱 강의 (0) | 2022.05.13 |
(1) Vue로 만드는 직방/인스타그램 웹앱 강의 (0) | 2022.05.13 |