vite 설치법

npm create vite@latest

 

vite 는 vue 뿐만 아니라 react 등 다양한 프로젝트 생성이 가능하다.

사용하는 언어는 javascript로 하자.

 

https://vuejs.org/

Vue.js

 

Composition API 작성 문법과 Options API 문법

--> 원쌤의 Vue.js 퀵스타트 275 P 설명을 읽어볼것.

 

ref : 상태 변수를 선언하는 함수

 

<script setup>

 import HelloWorld from './components/HelloWorld.vue'

import { ref } from 'vue'

const msg = ref('Hello Vue 3 + Vite')

</script>

 

반응형 변수(Reactive Vairable) : 데이터의 변화를 감시하고, 컴포넌트를 변경

<template>

  <h1>{{msg}}</h1>

  <input v-model="msg" />

 

</template>

 

데이터 바인딩 : 위와같이 상태변수를 <h1> 태그에 넣으면 화면이 출력이 됨.

JavaScript DOM(Document Object Model) 을 직접 제어할 필요가 없음.

 

v-model : 지시자(directive)