개요
Vue.js는 JavaScript 프레임워크입니다.
표준 HTML, CSS, JavaScript로 만들어져 있으며, 선언적이고 컴포넌트 기반의 프로그래밍 모델을 제공하여 효율적으로 사용자 인터페이스를 개발할 수 있도록 도와줍니다.
Vue의 가장 큰 특징 두가지는 선언적 렌더링(Declarative Rendering)과 반응성(Reactivity)입니다.
선언적 렌더링(Declarative Rendering)
Vue는 표준 HTML을 템플릿 문법과 함께 확장하여 Javascript 상태에 기반한 HTML 결과물을 만들어냅니다.
<div id="app">
{{ message }}
</div>var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
반응성(Reactivity)
Vue는 JavaScript의 상태변화를 추적하고, 변화가 발생하였을 때 DOM을 효과적으로 업데이트 할 수 있습니다.
<div id="app-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
</span>
</div>var app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})
진보적인 프레임워크
Vue는 프론트엔드 개발에 필요한 공통적인 특징들을 지원하는 프레임워크이며 생태계입니다.
Vue는 유연하고 점진적으로 채택할 수 있도록 설계되었습니다.
사용 사례에 따라 Vue를 다양한 방식으로 사용할 수 있습니다.
- 빌드 단계 없이 정적 HTML 향상 모든 페이지에 웹 구성 요소로 포함
- 단일 페이지 애플리케이션(SPA)
- 풀스택/서버 측 렌더링(SSR)
- Jamstack/정적 사이트 생성(SSG)
- 데스크탑, 모바일, WebGL, 터미널까지 타겟팅
싱글 파일 컴포넌트
Vue 프로젝트에서 단일 파일 구성 요소(*.vue 파일이라고도 함, SFC로 약칭)라는 HTML과 유사한 파일 형식을 사용하여 Vue 구성 요소의 논리(JavaScript), 템플릿(HTML) 및 스타일(CSS)을 하나의 파일로 캡슐화합니다.
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>API 스타일
Vue 구성 요소는 옵션 API와 구성 API의 두 가지 API 스타일로 작성할 수 있습니다.
Options API
Options API를 사용하여 데이터, 메소드, 마운트와 같은 옵션의 개체를 사용하여 구성 요소의 논리를 정의합니다. 옵션으로 정의된 속성은 구성 요소 인스턴스를 가리키는 내부 함수에 노출됩니다.
<script>
export default {
// Properties returned from data() become reactive state
// and will be exposed on `this`.
data() {
return {
count: 0
}
},
// Methods are functions that mutate state and trigger updates.
// They can be bound as event listeners in templates.
methods: {
increment() {
this.count++
}
},
// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
Composition API
구성 API를 사용하면 가져온 API 기능을 사용하여 구성 요소의 논리를 정의할 수 있습니다. SFC에서는 일반적으로 <script setup>과 함께 Composition API를 사용합니다. setup 속성은 더 적은 상용구로 컴포지션 API를 사용할 수 있도록 하는 컴파일 타임 변환을 수행하도록 Vue에 지시하는 힌트입니다. 예를 들어 <script setup>에서 선언된 import와 최상위 변수/함수는 템플릿에서 직접 사용할 수 있습니다.
다음은 정확히 동일한 템플릿을 사용하지만 대신 Composition API와 <script setup>을 사용하는 동일한 구성 요소입니다.
<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>참고
Vue.js 레퍼런스 문서https://vuejs.org/guide/introduction.html#the-progressive-framework