[Day-41] vue 서버-데이터 바인딩

3. 데이터 바인딩

 

ㆍ class 2

<template>
  <div class="container" v-bind:class="{active: isActive, 'text-red': hasError}">
    class Binding</div>
</template>

<script>
export default {
    data(){
        return{
            isActive: 'active'/*true*/,
            hasError: 'text-red'/*false*/
        }
    }

}
</script>

<style scope>
    .container{
        width:100%;
        height:200px;
    }


    .active{
        background-color:yellow;
        font-weight:bold;
    }

    .text-red{
        color:red;
    }
</style>

 

ㆍ style

<template>
<div v-bind:style="styleObject">인라인 스타일 바인딩</div>  
</template>

<script>
export default {
    data() {
        return {
            styleObject: {
                color: 'red',
                fontSize: '13px'
            }
        };
    }

}
</script>

 

4. 리스트 렌더링(v- for)

태그를 반복적으로 렌더링

v-for="(item, index) in items"

(items 배열)

<template>
<div>
    <table>
    <thread>
        <tr>
        <td>제품명</td>
        <td>가격</td>
        <td>카테고리</td>
        <td>배송료</td>
        </tr>
    </thread>
    <tbody>
        <tr :key="i" v-for="(product, i) in productList">
            <td>{{product.product_name}}</td>
            <td>{{product.price}}</td>
            <td>{{product.category}}</td>
            <td>{{product.delivery_price}}</td>
        </tr>
    </tbody>
    </table>
</div>  

</template>
<script>
export default {
    data() {
        return {
            productList: [
                {"product_name":"기계식키보드", "price":25000, "category":"노트북/태블릿", "delivery_price":5000},
                {"product_name":"무선마우스", "price":12000, "category":"노트북/태블릿", "delivery_price":5000},
                {"product_name":"아이패드", "price":725000, "category":"노트북/태블릿", "delivery_price":5000},
                {"product_name":"태블릿거치대", "price":42000, "category":"노트북/태블릿", "delivery_price":5000},
            ]
        };
    }

}
</script>

<style scoped>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%
    }
    td, th {
        border: 1px solid #dddddd;
        padding: 8px;
    }

</style>

---

5. 렌더링 문법 (v-if, v-show)

조건에 따라 렌더링 사용하는 방법

 

ㆍv-if

class는 조건에 따라 css 속성이 적용되냐 안되냐였다면

v-if는 출력이 되냐 안되냐의 문제

v-else-if도 가능

 

ㆍv-show

if문은 조건이 만족할 경우에만 렌더링

show는 무조건 렌더링이 된 다음에 display를 할 건지 말건지만 조건에 따라 결정

 

html 블록이 화면 내에서 자주 toggle이 일어나면 v-show를

 

<template>
<div>
    <h1 v-if="type=='A'">A</h1>
    <h1 v-else-if="type=='B'">B</h1>
    <h1 v-else>C</h1>
</div>  
</template>

<script>
export default {
    data() {
        return {
            type: 'A'
        };
    }

}
</script>

 

---

6. 이벤트 처리 v-on

1) click 이벤트

v-on:click="메소드명" 혹은 @click="메소드명"

뷰에서 메소드는 웬만하면 this.메소드

<template>
<div>
    <button type="button" @click="increaseCounter">Add 1</button>
    <p>The counter is : {{counter}}</p>
</div>  
</template>

<script>
export default {
    data() {
        return{
            counter: 0
        };
    },
    methods: {
        increaseCounter() {
            this.counter = this.counter + 1;
        }
    }

}
</script>

2) change 이벤트

옵션을 바꿀 때마다 change 이벤트 발생

 

3) key 이벤트

<input @keyup.enter="submit"/>

 

7. computed와 watch

둘 다 인스턴스 내의 정의된 데이터 값에 변경이 일어나는지를 감시하고, 변경될 떄마다 정의된 함수가 실행

 

1) computed

 

둘 중 하나가 변경이 일어났을 때 다

 

2) watch

 

 

실질적인 데이터 값의 변화가 없으면 일어나지 않아

<template>
<h1>Full Name : {{fullName}}</h1>  
</template>

<script>
export default {
    data() {
        return {
            firstName: 'Seugwon',
            lastName: 'Go',
            fullName: ''
        };
    },
    watch: {
        firstName() {
            this.fullName = this.firstName + ' ' + this.lastName;
        },
        lastName() {
            this.fullName = this.firstName + ' ' + this.lastName;
        }
    }
}
</script>

 

버튼 이벤트 추가해서 이벤트 일어났을 때 

<template>
<div>
<h1>Full Name : {{fullName}}</h1>
<button type="button" @click="changeName">변경</button>
</div>  
</template>

<script>
export default {
    data() {
        return {
            firstName: 'Seugwon',
            lastName: 'Go',
            fullName: ''
        };
    },
    watch: {
        firstName() {
            this.fullName = this.firstName + ' ' + this.lastName;
        },
        lastName() {
            this.fullName = this.firstName + ' ' + this.lastName;
        }
    },
    methods: {
        changeName() {
            this.firstName = 'Eunsol';
        }
    }
}
</script>

---

chap.6

mock 서버 준비하기

 

 

실제 서버처럼 클라이언트로부터 요청을 받으면 응답하는 가짜 서버

postman: api 개발을 위한 협업 플랫폼

 

1) postman 설치

 

2) Mock 서버 생성

 

 

---

chap.7

서버 데이터 바인딩 실습

 

1. 서버와의 데이터 통신을 위한 API 호출 메소드 만들기

1) Axios

서버와 데이터를 송수신 할 수 있는 HTTP 비동기 통신 라이브러리

- 설치

npm install axios --save

- Axios에서 제공하는 여러가지 request methods 

axios.request(config)	axios.delete(url[, config]	axios.options(url[, config]	axios.put(url[, config]
axios.get(url[, config])	axios.head(url[, config]	axios.post(url[, config]	axios.patch(url[, config]

서버와 통신 시 현재 통신하는 목적이 무엇인지 명확하게 전하기 위해 사용

서버에서는 클라이언트로부터 요청이 왔을 때, 그 요청에 따른 응답 프로그램으로 구현 가능

 

2) 믹스인(Mixins) 파일 생성

mixins를 통해 공통 함수 구현

공통함수를 구현해서 각각의 컴포넌트에서 호출해서 사용하는 방식(효율적)

 

- mixins.js 파일 생성

import axios from 'axios';

export default {
    methods: {
        async $api(url, method, data) {
            return (await axios({
                method: method,
                url,
                data
            }).catch(e => {
                console.log(e);
            })).data;
        }
    }
}

- main.js에 등록

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import mixins from './mixins'

const app = createApp(App)
app.use(router)
app.mixin(mixins);
app.mount('#app')

 

2. 서버 데이터 랜더링

1)