Vue:문법: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
(새 문서: {{Vue}} = API 사용 = Options API와 Composition API가 있다. 공식문서에선 같은 기능을 다음과 같이 짤 수 있다 소개한다. {| class="wikitable" |+ !Options A...) |
(→API 사용) |
||
| 1번째 줄: | 1번째 줄: | ||
{{Vue}} | {{Vue}} | ||
= API 사용 = | =API 사용= | ||
Options API와 Composition API가 있다. | Options API와 Composition API가 있다. | ||
| 11번째 줄: | 11번째 줄: | ||
|- | |- | ||
| | | | ||
* 인스턴스 중심. | *인스턴스 중심. | ||
* 초보자 친화적. | *초보자 친화적. | ||
| | | | ||
* 직접 설계.(복잡한 작업을 처리하기 위한 것) | *직접 설계.(복잡한 작업을 처리하기 위한 것) | ||
* 더 자유로움. | *더 자유로움. | ||
* 재사용성에 더 유리함. | *재사용성에 더 유리함. | ||
|- | |- | ||
|<syntaxhighlight lang="javascript"> | |<syntaxhighlight lang="javascript"> | ||
| 69번째 줄: | 69번째 줄: | ||
| | | | ||
|} | |} | ||
react에선 data를 담는 공간을 state라고 부르는데(각종 상태를 저장하니까), vue에서도 동일하게 사용하는 경우가 많다. | |||
2022년 7월 5일 (화) 10:12 판
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에서도 동일하게 사용하는 경우가 많다.