Vue:문법: 두 판 사이의 차이

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
편집 요약 없음
1번째 줄: 1번째 줄:
{{Vue}}
{{Vue}}
== 개요 ==
기본적으로 vue에서 사용하는 특수기능은 <code>v-</code>로 시작한다.


=API 사용=
=API 사용=

2022년 7월 5일 (화) 13:31 판

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