구성
<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) 반응성!
<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>