Vue 컨포넌트 - 데이터 바인딩 (2)

Form 입력 데이터 바인딩

• Form Element
  • 웹 페이지에서 사용자로부터 데이터를 입력받을 수 있는 필드
• v-model 디렉티브로 양방향 데이터 바인딩 생성 가능
  • v-model 은 내부적으로 서로 다운 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송함

input type=text

• 입력받은 텍스트는 value에 저장됨
• input type=text 에서 v-model은 내부적으로 value 속성을 사용함
• data() 에 정의된 데이터 키명을 v-model에 넣어주면 모델와 뷰인 input type=text의 value 속성이 서로 양방향으로 데이터 바인딩 설정됨
• 사용자가 input type=text 객체의 텍스트 입력/변경시 valueModel에 저장된다.

vue-project/src/views/DataBindingInputText.vue

<template>
  <div>
    <input type="text" v-model="valueModel" />
  </div>
</template>
<script>
export default{ 
    data(){
        return{
            valueModel: 'ha ha ha'
        };
    },
}
</script>

inupt type=number

• 숫자값만 입력받을때 사용

vue-project/src/views/DataBindingInputNumber.vue

<template>
    <div>
      <input type="number" v-model="valueModel" />
    </div>
  </template>
  <script>
  export default{ 
      data(){
          return{
              valueModel: 1000
          };
      },
  }
  </script>

textarea

• 형태로 사용

vue-project/src/views/DataBindingTextarea.vue

<template>
    <div>
        <textarea v-model="message"></textarea>
    </div>
</template>
<script>
export default{ 
    data(){
        return{
            message: '이것은 메시지'
        };
    },
}
</script>

select

vue-project/src/views/DataBindingSelect.vue

<template>
    <div>
        <select v-model="city">
            <option value="02">서울</option>
            <option value="053">대구</option>
            <option value="051">부산</option>
        </select>
    </div>
</template>
<script>
export default{ 
    data(){
        return{
            city: '02'
        };
    },
}
</script>

input type=checkbox

• checkbox 는 v-model 이 value 속성이 아닌 checked 속성을 사용해야되서 value 속성에 데이터바인딩을 하려면 v-model이 아닌 v-bind:value 를 사용함

vue-project/src/views/DataBindingCheckbox.vue

<template>
    <div>
      <lable><input type="checkbox" v-model="checked1">{{ checked1 }}</lable>
      <!-- 체크 해제 되었을때 기본값 변경  -->
      <lable><input type="checkbox" v-model="checked2" true-value="yes" false-value="no">{{ checked2 }}</lable>
    </div>
  </template>
  <script>
  export default{ 
      data(){
          return{
            checked1: true,
            checked2: true
          };
      },
  }
  </script>

vue-project/src/views/DataBindingCheckbox2.vue

<!-- 여러개의 체크박스를 사용할때 -->
<template>
    <div>
      <lable><input type="checkbox" value="서울" v-model="checked"> 서울 </lable>
      <lable><input type="checkbox" value="대구" v-model="checked"> 대구 </lable>
      <lable><input type="checkbox" value="부산" v-model="checked"> 부산 </lable>
    </div>
    <br>
    <span>체크한 지역: {{ checked }}</span>
  </template>
  <script>
  export default{ 
      data(){
          return{
            checked: []
          };
      },
  }
  </script>

input type=radio

• radio 는 v-model 이 value 속성이 아닌 checked 속성을 사용해야되서 value 속성에 데이터바인딩을 하려면 v-model이 아닌 v-bind:value 를 사용함

vue-project/src/views/DataBindingRadio.vue

<template>
    <div>
      <lable><input type="radio" v-bind:value="radioValue1" v-model="picked"> 서울 </lable>
      <lable><input type="radio" v-bind:value="radioValue2" v-model="picked"> 대구 </lable>
      <lable><input type="radio" v-bind:value="radioValue3" v-model="picked"> 부산 </lable>
    </div>
    <br>
    <span>선택한 지역: {{ picked }}</span>
  </template>
  <script>
  export default{ 
      data(){
          return{
            picked: '',
            radioValue1: '서울',
            radioValue2: '부산',
            radioValue3: '제주',
          };
      },
  }
  </script>

속성 (Attribute)

• v-bind: 디렉티브
  • value 을 제외한 HTML 객채의 속성에 데이터를 바인딩하기 위해 사용
  • v-bind: 디렉티브는 v-bind을 생략하고 : 으로 사용 가능

img 객체의 src

vue-project/src/views/DataBindingAttribue.vue

<template>
    <div>
      <img v-bind:src="imgSrc" />
    </div>
  </template>
  <script>
  export default{ 
      data(){
          return{
            imgSrc: "https://kr.vuejs.org/images/logo.png"
          };
      },
  }
  </script>

button 객체의 disabled

vue-project/src/views/DataBindingButton.vue

<template>
    <div>
      <input type="text" v-model="textValue" />
      <button type="button" v-bind:disabled="textValue==''">Click</button>
    </div>
  </template>
  <script>
  export default{ 
      data(){
          return{
            textValue: '',
          };
      },
  }
  </script>

클래스 바인딩

• 클래스 바인딩시 특이점
  • class 속성에 클래스명을 입력, 조건에 따라 바인딩할 클래스의 경우 v-bind:css를 이용해서 추가적으로 정의해서 사용할 수 있다.
  • 다른 속성의 경우 하나의 속성만을 이용해서 바인딩 해야하지만 클래스의 경우 기본 클래스와 데이터 바인딩 처리를 하는 클래스를 공전해서 사용할 수 있다.

vue-project/src/views/DataBindingClass.vue

<template>
  <div class="container" v-bind:class="{'active': isAcitve, 'text-red': hasError}">
    Class Binding
  </div>
</template>
<script>
export default{ 
    data(){
        return{
            isAcitve: true,
            hasError: false
        };
    }
}
</script>
<style scoped>
    container {
        width: 100%;
        height: 200px;
    }
    .active {
        background-color: yellow;
        font-weight: blod;
    }
    .text-red {
        color:red;
    }
</style>

vue-project/src/views/DataBindingClass2.vue

<!-- 배열을 사용해서 클래스 바인딩 가능 -->
<template>
    <div class="container" v-bind:class="[activeClass, errorClass]">
      Class Binding
    </div>
  </template>
  <script>
  export default{ 
      data(){
          return{
            activeClass: 'active',
            errorClass: 'text-red'
          };
      }
  }
  </script>
  <style scoped>
      container {
          width: 100%;
          height: 200px;
      }
      .active {
          background-color: yellow;
          font-weight: blod;
      }
      .text-red {
          color:red;
      }
  </style>

인라인 스타일 바인딩

• 인라인 스타일의 경우 데이터를 오브젝트로 선언해서 바인딩

<template>
    <div v-bind:style="styleObjects">
        인라인 스타일 바인딩
    </div>
</template>
<script>
    export default{ 
        data(){
            return{
                styleObjects: {
                    color: 'red',
                    fontSize: '13px'
                }
            };
        }
    }
</script>

리스트 랜더링 (v-for)

• v-for="(item, index) in items" 형식으로 사용
  • items는 데이터 배열
  • v-for 를 통해 배열을 하나씩 읽어와서 각 아이템을 item으로, 배열의 현재 index를 index로 반환

vue-project/src/views/DataBindingList.vue

<template>
  <div>
    <table>
      <header>
        <tr>
          <th>제품명</th>
          <th>가격</th>
          <th>카테고리</th>
          <th>배송료</th>
        </tr>
      </header>
      <tbody>
        <tr :key="i" v-for="(prodcut, i) in productList">
          <td>{{ prodcut.product_name }}</td>
          <td>{{ prodcut.price }}</td>
          <td>{{ prodcut.category }}</td>
          <td>{{ prodcut.delivery_price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default{ 
    data(){
        return{
          productList: [
            { "product_name":"AAAA", "price":1000, "category":"A", "delivery_price": 100 }, 
            { "product_name":"BBBB", "price":2000, "category":"B", "delivery_price": 100 }, 
            { "product_name":"CCCC", "price":3000, "category":"C", "delivery_price": 100 }, 
            { "product_name":"DDDD", "price":4000, "category":"D", "delivery_price": 100 }, 
          ]
        };
    },
}
</script>

랜더링 문법 (v-if, v-show)

v-if

• v-if 디렉티브 표현식

<!-- v-else 디렉티브를 사용해서 else if 표현식 사용가능 --> 
<h1 v-if="showFlag">showFlag가 true 이면, 현재 블록이 화면에 보인다.</h1>
<h1 v-else>showFlag가 true가 아니면 현재 블록이 보인다.</h1>

vue-project/src/views/RenderingVIf.vue

<template>
  <div>
    <h1 v-if="type=='A'">A</h1>
    <h1 v-else-if="type=='B'">B</h1>
    <h1 v-else>ETC</h1>
  </div>
</template>
<script>
export default{ 
    data(){
        return{
            type: 'A'
        };
    }
}
</script>

v-show

• v-show 디렉티브 표현식

<h1 v-show="showFlag">showFlag가 true 이면, 현재 블록이 화면에 보인다.</h1>

• v-if 와 v-show 의 차이점
  • v-if 는 조건에 만족하면 그순간에 html 블록이 생성되고, 조건에 만족하지 않으면 html 블록은 삭제된다.
    • v-if 는 실제로 해당 블록 전체를 생성했다 삭제하여 v-show 보다 리소스 사용이 많다.
  • v-show 는 조건 만족여부와 관련없이 무조건 html 블록이 생성됨
    • 조건 만족시 css의 display를 이용해서 화면에서 보여진다.
    • 조건 불만족시 화면에서 숨겨진다.
  • html 블록에서 toggle 이 자주 발생하면 v-show 를 사용하고 그렇지 않을 경우 v-if 를 권장

이벤트 처리 (v-on)

• vue 컴포넌트에서 이벤트 처리시 v-on 디렉티브를 사용
• v-on 디렉티브는 심볼 @ 로 사용 가능

클릭 이벤트 (v-on:click)

vue-project/src/views/EventClick.vue

<template>
  <div>
    <button type="button" @click="addCounter">Add 1</button>
    <!-- 함수에 파라미터를 전달하고 싶을 때-->
    <button type="button" @click="addCounterNumber(3)">Add 3</button>
    <p>This Counter is : {{ counter }}</p>
  </div>
</template>
<script>
export default{ 
    data(){
        return{
            counter: 0
        };
    },
    methods: {
        addCounter() {
            this.counter = this.counter + 1;
        },
        addCounterNumber(number) {
            this.counter = this.counter + number;
        }
    }
}
</script>

Change 이벤트

• @change="메소드명" 으로 사용

/home/kalva/vue-project/src/views/EventChange.vue

<template>
  <div>
    <select v-mode="selectedValue" @change="changeSelect">
      <option value="서울">서울</option>
      <option value="대구">대구</option>
      <option value="부산">부산</option>
    </select>
  </div>
</template>
<script>
export default{ 
    data(){
        return{
            selectedValue:''
        };
    },
    methods:{
        changeSelect() {
            alert(this.selectedValue);
        }
    }
}
</script>

Key 이벤트

• Vue 에서 제공하는 Key 이벤트
  • .enter
  • .up
  • .tab
  • .down
  • .delete (키보드 Del, Backspace 키)
  • .left
  • .esc
  • .right
  • .space

<!-- 엔터키 입력 -->
<input @keyup.enter="submit" />

<!-- Alter + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

computed, watch

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

computed

vue-project/src/views/Computed.vue

• firstName, lastName 의 값중 하나라도 변경되면 fullName 함수가 자동으로 실행되고 fullName 값이 갱신된다.
  • firstName, lastName 의 초기 지정값도 변경으로 인식한다.

    <template>
    <div>
    <h1>Full Name: {{ fullName }}</h1>
    </div>
    </template>
    <script>
    export default{ 
    data(){
        return{
            firstName: 'AAA',
            lastName: 'BBB'
        };
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName;
        }
    }
    }
    </script>

watch

• watch 는 초기에 할당된 값에서 변경이 일어나야 watch 에서 정의한 함수를 실행한다.
  • firstName, lastName 의 초기 지정값은 변경으로 인식 안한다.

vue-project/src/views/Watch.vue

<template>
  <div>
        <h1>Full Name : {{ fullName }}</h1>
        <button type="button" @click="changeName">변경</button>
  </div>
</template>
<script>
export default{ 
    data(){
        return{
            firstName: '',
            lastName: '',
            fullName: ''
        };
    },
    watch: {
        firstName() {
            this.fullName = this.firstName + ' ' + this.lastName;
        },
        lastName() {
            this.fullName = this.firstName + ' ' + this.lastName;
        }
    },
    methods: {
        changeName() {
            this.firstName = 'CCC';
        }
    }
}
</script>