Vue:문법

틀:Vue

1. Vue:개요
   1. Vue:설치 및 개발환경 세팅
   2. Vue:프로젝트 생성 및 시작해보기
2. Vue:문법
   1. Vue:데이터바인딩
   2. Vue:반복문
   3. Vue:조건문
   4. Vue:함수
3. Vue:이벤트
   1. 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> ref, onMounted 등 필요한 기능을 사용할 줄 알아야 한다. 프레임워크 자체에 익숙해야 자유자재로 다룰 수 있는 형태.

react에선 data를 담는 공간을 state라고 부르는데(각종 상태를 저장하니까), vue에서도 동일하게 사용하는 경우가 많다.