컴포넌트 Basic

속성(Attribute)

value를 제외한 html 속성에 데이터를 바인딩 하기 위해서는 v-bind: 디렉티브 사용

클래스 바인딩

반드시 적용해야 하는 클래스는 기존 html에서 사용하는 방식처럼 class 속성에 클래스명 입력 추가로 바인딩할 클래스의 경우 v-bind:class사용

인라인 스타일 바인딩

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

리스트 랜더링

v-for를 통해서 배열 데이터 바인딩

• v-for="(item,index) in items"로 사용

랜더링 문법

v-if

• v-if 디렉티브에 true가 리턴이되면 html 블록이 랜더링 반대로 false인 경우는 화면에 랜더링 되지 않음

v-show

• 조건에 상관없이 일단 랜더링하고 true이면 보여주고 false이면 보여주지 않음

<template>
  <div>
    <img v-bind:src="imgSrc" />
  </div>
  <div>
    <input type="text" v-model="textValue" />
    <button type="button" :disabled="textValue === ''">Click</button>
  </div>
  <div>
    <div class="container" :class="{ active: isActive, 'text-red': hasError }">
      Class Binding
    </div>
  </div>
  <div>
    <div v-bind:style="styleObject">인라인 스타일 바인딩</div>
  </div>
  <div>
    <table>
      <thead>
        <tr>
          <th>제품명</th>
          <th>가격</th>
          <th>카테고리</th>
          <th>배송료</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="i" v-for="(product, i) in productList">
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <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 {
      imgSrc: "https://kr.vuejs.org/images/logo.png",
      textValue: "",
      isActive: true,
      hasError: false,
      styleObject: {
        color: "red",
        fontSize: "13px",
      },
      productList: [
        { name: "기계식 키보드1", price: 2000, category: "노트북1" },
        { name: "기계식 키보드2", price: 3000, category: "노트북2" },
        { name: "기계식 키보드3", price: 4000, category: "노트북3" },
        { name: "기계식 키보드4", price: 5000, category: "노트북4" },
        { name: "기계식 키보드5", price: 6000, category: "노트북5" },
        { name: "기계식 키보드6", price: 7000, category: "노트북6" },
      ],
      type:'A',
    };
  },
};
</script>
<style>
container {
  width: 100%;
  height: 200px;
}
.active {
  background-color: yellow;
  font-weight: bold;
}
.text-red {
  color: red;
}
</style>

이벤트 처리(v-on)

클릭 이벤트

v-on:click="메소드명" 또는 @click="메소드명"

체인지 이벤트

@change="메소드명"

Key 이벤트

사용자가 키보드 자판을 입력할 때 발생

@keyup을 사용

• enter
• tab
• delete
• esc
• space
• up
• down
• let
• right

<template>
  <div>
    <button type="button" @click="increaseCounter">Add 1</button>
    <p>Counter : {{counter}}</p>
  </div>
  <div>
    <select v-model="selectValue" @change="changeSelect">
      <option value="서울">서울</option>
      <option value="대구">대구</option>
      <option value="부산">부산</option>
    </select>
  </div>
</template>

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

<style lang="scss" scoped>

</style>

computed 와 watch

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

computed

• Vue인스턴스 내에 정의된 데이터 값과 연관된 또 하나의 데이터를 정의해서 사용할 수 있도록 해줌

watch

• watch에 정의된 데이터 값 하나만을 감시하기 위한 용도로 사용
• 실제 데이터 변경이 일어나기 전까지는 실행되지 않음

<template>
  <div>
    <h1>fullName : {{fullName}}</h1>

  </div>
</template>

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

  }
</script>

<style lang="scss" scoped>

</style>