[VUE.JS] 반응성(Reactivity), 디렉티브(Directive), 조건문과 반복문

반응성(Reactivity)

데이터가 변경되었을 때, 이를 감지하고 반응하는 것

 

디렉티브(Directive)

v-

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <div v-if="count > 4">
    4보다 큽니다!
  </div>
  <ul>
    <li
      v-for="fruit in fruits"
      :key="fruit">
      {{ fruit }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  methods: {
    increase: function() {
      this.count ++
    }
  }
}
</script>