vue

구성

<template>

</template>
<script>

</script>
<style>

</style>

문법

선언하기

<template>
  <h1 @click="increase">{{ count }}</h1>  
</template>
<script>
export default {
  data(){
    return {
      count: 0,
    }
  },
  methods: {
    increase(){
      this.count += 1;
    }
  }
}
</script>
<style>
  h1 {
    color: royalblue;
    font-size: 12px;
  }
</style>

• data 옵션에 return 으로 data를 선언해준다.

• methods 옵션에 function을 만들어 실행을 준비시킬 수 있다.( 이벤트 핸들러 )

• data를 갱신하면 화면에 표현되는것도 바뀐다. (Reactivity) 반응성!

조건문

• v-속성 을 디렉티브(Directive) 라고 한다.

<template>
  <h1 @click="increase">{{ count }}</h1>  
  <div v-if="count>4">4보다 큽니다.</div>
</template>
<script>
export default {
  data(){
    return {
      count: 0,
    }
  },
  methods: {
    increase(){
      this.count += 1;
    }
  }
}
</script>
<style>
  h1 {
    color: royalblue;
    font-size: 12px;
  }
</style>

반복문

<template>
  <h1 @click="increase">{{ count }}</h1>  
  <div v-if="count>4">4보다 큽니다.</div>
  <div v-for="fruit in fruits" v-bind:key="fruit">{{fruit}}</div>
</template>
<script>
export default {
  data(){
    return {
      count: 0,
      fruits: [banana, apple, cherry]
    }
  },
  methods: {
    increase(){
      this.count += 1;
    }
  }
}
</script>
<style>
  h1 {
    color: royalblue;
    font-size: 12px;
  }
</style>