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에서도 동일하게 사용하는 경우가 많다.

data 안에서 정의된 것이 아니라 자유롭게 자바스크립트를 이용하여 변수를 추가할 수도 있는데, 다른 방법으로 추가된 변수들은 추후 조작이 어렵다.