Vue 디렉티브 - day2

Vue 디렉티브

디렉티브란 ? HTML 안에서 v-접두사를 사용하는 속성들을 의미합니다.
화면의 요서를 더 쉽게 조작하기 위하여 사용하는 기능들을 의미합니다.

1. v-text

해당 HTML 태그에 text를 표시 할 경우 사용됩니다.
innerText와 동일한 기능을 수행합니다.

<template>
  <div class="hello">
    <div v-text="text"></div>
  </div>
 </template>
 <script>
  export default {
    name: 'TEST',
    data(){
      return {
          text:'테스트중입니다.'
      }
    }
  }
</script>

2. v-if

지정한 뷰데이터 값에 따라 해당 HTML 을 표시하거나 표시하지 않습니다.
JAVASCRIPT의 if구문과 같은 방법 사용 가능

<template>
  <div class="hello">
    <div v-if='flag === 1'>flag 값이 1 일 경우 표시 하겠습니다</div>
    <div v-else-if='flag === 2'>flag 값이 2 일 경우 표시 하겠습니다</div>
    <div v-else>그 외의 값 일 경우 표시하게습니다.</div>
  </div>
  </template>
  <script>
  export default {
    name: 'TEST',
    data(){
      return {
        flag: 1
      }
    }
  }
</script>

해당 코드를 실행 시킬시 flag값에따라 표시되는 text가 다르다는 것을 확인 할 수 있습니다.

3. v-for

지정한 뷰 데이터 개수만큼 해당 HTML을 반복출력 할 수 있습니다.

<template>
  <div class="hello">
    <div v-for='(element, index) in list' :key="index">{{ element }}</div>
  </div>
</template>
<script>
  export default {
    name: 'TEST',
    data(){
      return {
        list: [ '사과', '바나나', '파인애플', '포도' ]
      }
    }
  }
</script>

4. v-show

v-if와 같이 해당 HTML을 표시할지 말지 결정하는 디레티브이지만 v-if의 경우 해당 태그를 완전 삭제하지만 v-show는 css의 display:none과 같이 실제 태그는 남아있지만 화면상으로만 보이지 않는 상태를 가지는 차이점이 있습니다.

<template>
  <div class="hello">
    <div v-if='flag'>flag 값이 true 일 경우 표시 하겠습니다</div>
  </div>
  </template>
 <script>
  export default {
    name: 'TEST',
    data(){
      return {
        flag: true
      }
    }
  }
</script>

5. v-bind

HTML 태그의 class, style 과 같은 속성과 뷰 데이터의 속성을 연결하여 사용 할 수 있습니다.
v-bind의 경우 v-접두사 문구를 생략하여 사용 할 수 있습니다.

<template>
  <div class="hello">
    <div v-bind:id="id" v-bind:class="name" :style="{color:colorStyle}" >{{ name }}</div>
  </div>
</template>

<script>
  export default {
    name: 'TEST',
    data(){
      return {
        id:1,
        name: 'className',
        colorStyle: 'red',
      }
    }
  }

</script>

HTML의 태그 속성을 통해 id와 class를 컨트롤하고 폰트컬러를 변경하여 표시하였습니다.

6. v-on

HTML의 태그에 이벤트를 연결 할 때 사용, 대표적으로 click이벤트가 있습니다.

<template>
  <div class="hello">
    <button v-on:click='handleClick'>버튼</button>
    <div>{{ text }}</div>
  </div>
</template>

<script>
export default {
  name: 'TEST',
  data(){
    return {
      text:'클릭전 텍스트'
    }
  },
  methods: {
    handleClick() {
      this.text = '클릭후 텍스트'  
    }
  },
}
</script>

click이벤트를 핸들링하는 코드입니다.
버튼을 클릭전에는 '클릭전 텍스트'가 표시 되지만 버튼을 클릭시 '클릭후 텍스트'가 표시됩니다.

7. v-once

지정한 뷰데이터 값에 따라 해당 HTML 을 표시하거나 표시하지 않습니다.
HTML태그를 딱 한 번만 렌더링해주는 것이 특징이며 주로 변동이 없는 정적인 부분을 보여줄때 사용 됩니다. (값이 변경되어도 초기값만 표시)

<template>
  <div class="hello">
      <button v-on:click='handleClick'>버튼</button>
    <div v-once>여기 값은 변하지 않습니다. {{ text }}</div>
  </div>
 </template>

<script>
export default {
  name: 'TEST',
  data(){
    return {
      text:'클릭전 텍스트'
    }
  },
  methods: {
    handleClick() {
      this.text = '클릭후 텍스트'  
    }
  },
}
</script>