Vue:문법
API 사용
Options API와 Composition API가 있다.
공식문서에선 같은 기능을 다음과 같이 짤 수 있다 소개한다.
Options API | Composition API |
---|---|
|
|
<script>
export default {
// 담는 데이터
data() {
return {
count: 0
}
},
// 실행할 함수
methods: {
increment() {
this.count++
}
},
// HTML 태그에 마운트 될 때의 동작.
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
|
<script setup>
import { ref, onMounted } from 'vue'
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
count.value++
}
// lifecycle hooks
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
프레임워크 자체에 익숙해야 자유자재로 다룰 수 있는 형태. |
react에선 data를 담는 공간을 state라고 부르는데(각종 상태를 저장하니까), vue에서도 동일하게 사용하는 경우가 많다.