Vue:문법
개요
기본적으로 vue에서 사용하는 특수기능은 v-로 시작한다.
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에서도 동일하게 사용하는 경우가 많다.
data 안에서 정의된 것이 아니라 자유롭게 자바스크립트를 이용하여 변수를 추가할 수도 있는데, 다른 방법으로 추가된 변수들은 추후 조작이 어렵다.