실습에서 조건문
조건문을 주어 재고가 있다 없다를 출력해보자.
if예제
<!-- 조건문 -->
<template >
<div id="app">
<div class="nav-bar"></div>
<!-- 장바구니 본문 -->
<div class="product-display">
<div class="product-container">
<!-- 왼쪽이미지(양말) -->
<div class="product-image">
<img :src="image" alt="초록양말">
</div>
<!-- 오른쪽 설명글 -->
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock == true">In Stock</p>
<p v-else>Out Of Stock</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
product: "Socks",
image: require("@/assets/img/socks_green.jpg"),
inStock: true,
}
},
}
</script>
<style ></style>inStock속성을 주었고 속성값으로 true, false를 주었다.
v-if문으로 instock이 true이면 InStock을 출력하고, 그렇지 않으면(else) out of stock이 나오게 했다.
if문제
이번엔 수량에 따라 출력을 다르게 해보자
<!-- 조건문 -->
<template >
<div id="app">
<div class="nav-bar"></div>
<!-- 장바구니 본문 -->
<div class="product-display">
<div class="product-container">
<!-- 왼쪽이미지(양말) -->
<div class="product-image">
<img :src="image" alt="초록양말">
</div>
<!-- 오른쪽 설명글 -->
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inventory > 10">재고 있음</p>
<p v-else-if="inventory > 0">재고가 떨어져감</p>
<p v-else>재고 없음</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
product: "Socks",
image: require("@/assets/img/socks_green.jpg"),
inStock: true,
inventory: 0,
}
},
}
</script>
<style ></style>inventory라는 속성을 주고 값으로는 0을 주었다.
그리고 조건문으로 인벤토리가 10보다 크면 "재고있음", 0보다 크면 "재고가 떠어져감, 나머지는 "재고 없음"이 출력되게했다.
여기까지는 어려움이나 궁금점이 딱히 없다.
실습에서 반복문
반복문 예제
<!-- 반복문 -->
<template >
<div id="app">
<div class="nav-bar"></div>
<!-- 장바구니 본문 -->
<div class="product-display">
<div class="product-container">
<!-- 왼쪽이미지(양말) -->
<div class="product-image">
<img :src="image" alt="초록양말">
</div>
<!-- 오른쪽 설명글 -->
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out Of Stock</p>
<ul>
<li v-for="(detail, index) in details" :key="index">{{ detail }}</li>
</ul>
<ul>
<li v-for="variant in variants" :key="variant.id">{{ variant.color }}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
product: "Socks",
image: require("@/assets/img/socks_green.jpg"),
inStock: true,
details: ["50% cotton", "30% wool", "20% polyyester"],
variants: [
{ id: 2234, color: "green" },
{ id: 2235, color: "blue" }
]
}
},
}
</script>
<style ></style>details의 반복문은 전에 배웠던 모습과 똑같은데, variants의 반복문은 모양이 좀 다르다 이 코드를 이해해보려 했지만 전에 반복문을 배울때 반복문의 원리를 제대로 파악하지 못해 코드를 이해하지 못한거 같다.
찾아보니 원래 사용했던것과 똑같이 사용해도 같다. 즉
<ul>
<li v-for="variant in variants" :key="variant.id">{{ variant.color }}</li>
</ul>이 것과
<ul>
<li v-for="(data, index) in variants" :key="index">{{ data.color }}</li>
</ul>이것이 같은 값이나온다. 근데 객체에서는 위와 같은 코드를 사용할 수 있다.
자세히 알아보면 첫 코드의 variant와 data는 변수이고 여기에 배열의 값을 담는다 즉 variants[]인것이다. 또 variant.id와 index도 변수인데 이게 일반 반복문의 i같은 역할고 순서를 나타내는 것이다.
두개다 변수이기 때문에 어느 문자가 와도 상관이 없기에 같은 값이 나오는 것이었다.
실습에서 event
예제
<!-- 반복문 -->
<template >
<div id="app">
<div class="nav-bar"></div>
<!-- 장바구니 본문 -->
<div class="product-display">
<div class="product-container">
<!-- 왼쪽이미지(양말) -->
<div class="product-image">
<img :src="image" alt="초록양말">
</div>
<!-- 오른쪽 설명글 -->
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out Of Stock</p>
<ul>
<li v-for="(detail, index) in details" :key="index">{{ detail }}</li>
</ul>
<ul>
<li v-for="(data, index) in variants" :key="index">{{ data.color }}</li>
</ul>
<div v-for="variant in variants"
:key="variant.id"
@mouseover = "updateImage(variant.image)">{{ variant.color }}</div>
<button class="button" v-on:click="addToCart">Add to Cart</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
product: "Socks",
image: require("@/assets/img/socks_green.jpg"),
inStock: true,
details: ["50% cotton", "30% wool", "20% polyyester"],
variants: [
{ id: 2234, color: "green" },
{ id: 2235, color: "blue" }
]
}
},
methods: {
addToCart(){
this.cart +=1;
},
updateImage(variantImage){
this.image = variantImage;
}
},
}
</script>
<style ></style>마우스가 올라가면 이미지가 생기는 이벤트를 만들어보자
반복문을 통해 양말의 색깔을 출력했다.
그리고 mouseover을 주고 updateImage함수의 매개변수가 image속성이 되도록 만들어주었다. 이렇게 되면 함수를 사용할때 매개변수를 주면 그 매개변수가 함수가끝날때까지 image가 된다.
매개변수 사용 경우(참고)
현재의 어떤 요소를 잠시 event가 일어났을때 내가 원하는 것으로 바꿔주고 싶다면 매개변수를 이용해서 그 매개변수에 속성을 넣어주면 원래 요소가 매개변수 자리에 넣어준 요소로 바뀌게 할 수 있다.
그리고 버튼을 만들어 클릭시 cart가 1씩 증가하는 함수를 만들어 onclick속성에 넣어주었다.
게시판 만들기
백엔드 파일 받기
선생님께서 백엔드 파일을 json파일로 보내주신것을 public파일에 담았다.
백엔드와 프론트가 통신하는데 형식이 필요한데 이 때 형식이 json데이터이다. 이게 vue & springboot통신의 형식이다. 이 json파일은 객체배열형태로 생겼다.
header 컴포넌트 등록하기
지난번에도 많이 했듯이 appvue에 js태그를 만들어 import해주고 export default에 components객체형태로 만들어서 거기에 넣어준다. 마지막으로 header component태그를 만들어 template에 넣어준다.
부트스트랩 연결
부트스트랩 홈페이지에서 css와 js링크를 연결했다.
또한 navbar을 하나 가져와서 연결했다.
연결후 필요없는 것들을 제거했다.
dept 소메뉴
dept라는 부서메뉴를 만들어서 vue파일과 연결했다.
부트스트랩에서 테이블을 하나 넣어주었다.
router이 출력되는 부분이 너무 넓어서 가운데 정렬을 위해 컨테이너속성을 주었다.
마진도 주었는데 부트스트랩에서 마진은 그림을 참고하자
마진을 주는 것은 "mt-숫자"를 해주면 되는데 여기서 m은 마진을 나타내고t는 방향인 top을 나타낸다. 숫자를 주면서 거리를 내줄 수 있다.
테이블에서 첫행과 반복문을 돌릴 두번째 행을 남겨두고 모두 지웠다.(반복문 돌릴꺼니까 첫행만 있으면된다.)
다운받은 json파일 읽어들이기(필수)
axios라이브러리가 가져온 json파일을 읽어야한다.(백엔드와 연동)
axios는 라이브러리로 jquery처럼 함수들이 모여있는 것이다.
vue에 기본적으로 설치되어있지 않아서 추가적인 설치가 필요한다.
axios설치
이번엔 cdn를 사용하지 않고 설치를 해보겠다.
- npm install axios(대부분의 라이브러리는 "npm install 라이브러리명"을 해주면된다.)를 터미널에 입력하면 끝
- 설치된 라이브러리 확인 - pakage.json파일내의 dependencies 목록에서 확인한다.
잘 설치되었다. (참고로 삭제 방법은 "npm aninstall axios"명령어를 입력해주면된다.
