Vue.js - The Progressive JavaScript Framework | Vue.js
Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
Vue는 프론트앤드 프레임워크로 HTML, CSS, JavaScript를 기반으로 한 템플릿을 제공한다. Vue를 사용하는 방법은 크게 두 가지로 나눌 수 있다.
CDN (Content Delivery Network)
스크립트 태그를 통해서 직접 Vue를 사용할 수 있다.
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Vue CLI
Vue.js기반의 프로젝트를 생성하고 관리하는데 사용되는 도구로, 복잡한 설정 없이도 기본적인 구조와 파일을 자동으로 생성해준다. 컴퓨터 환경 전역에 Vue CLI를 설치하여, 이후 Vue 프로젝트 생성 시에 간편한 명령어를 통해 vue를 시작할 수 있다.
#npm
npm install -g @vue/cli
#yarn
yarn global add @vue/cli
Vue 프로젝트 생성
Vue CLI를 설치한 후, 프로젝트를 만들고자 하는 디렉터리로 이동하여 다음 명령어를 실행한다.
// npm
npm create vue@latest 프로젝트명
//yarn
yarn create vue@latest 프로젝트명
설치가 완료되면 해당 Vue 프로젝트 디렉터리로 들어가서 dependencies를 설치하고 서버를 실행한다.
// npm
npm install
npm run dev
// yarn
yarn
yarn devVue 기본 문법
- createApp : Vue 애플리케이션을 시작하는 함수로, Vue 인스턴스를 생성한다.
- component
- data : 컴포넌트의 데이터를 반환하는 함수다.
- methods : 컴포넌트 인스턴스에 메서드를 추가한다.
- template : Vue 애플리케이션의 구조와 레이아웃을 정의한다.
- props : 부모 컴포넌트로부터 데이터를 전달받는다.
- mount : Vue 애플리케이션 인스턴스를 특정 DOM 요소에 연결하는 함수이다.
CDN 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Document</title>
<style>
#app{
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<!-- Vue 애플리케이션이 마운트 되는 곳 -->
{{ value }}
<button @click="setValue('Hello, Vue!')">Set Value</button>
</div>
<script>
const { createApp } = Vue; // Vue를 가져온다.
createApp({ // Vue 애플리케이션을 생성한다.
data() { // Vue 인스턴스의 반응형 데이터를 정의한다.
return {
value: '안녕, 뷰!' // 해당하는 데이터를 반환한다.
};
},
methods: { // Vue 인스턴스의 메서드를 정의한다.
setValue(value) {
this.value = value; // value를 설정한다.
}
}
}).mount('#app'); // 생성한 Vue 애플리케이션을 #app 요소에 마운트한다.
</script>
</body>
</html>
Vue 어플리케이션 예제
1. App.vue 설정
<!-- App.vue -->
<!-- Vue 애플리케이션의 구조와 레이아웃 정의 -->
<template>
<div id="app">
<!-- Comp1이라는 컴포넌트 사용 -->
<Comp1/>
</div>
</template>
<script>
// Comp1을 불러온다.
import Comp1 from './components/Comp1.vue';
// App.vue에 대한 설정을 정의한다.
export default {
name: 'App',
// AApp.vue에서 사용할 하위 컴포넌트를 등록한다.
components: {
Comp1
}
};
</script>
<!-- <style>태그를 통해서 스타일을 정의할 수 있다. -->
<style>
#app{
background-color: rgb(255, 209, 222);
}
</style>
2. 컴포넌트 설정
<!-- Comp1.vue -->
<!-- Comp1.vue의 구조와 레이아웃을 정의한다. -->
<template>
<div>
<h1>{{ value }}</h1>
<button @click="setValue('Hello, Vue!')">Set Value</button>
</div>
</template>
<script>
export default {
data() {
return {
value: '안녕, 뷰!'
};
},
methods:
{ // Vue 인스턴스의 메서드를 정의한다.
setValue(value) {
this.value = value; // value를 설정한다.
}
}
};
</script>
<style>
h1{
color: white;
}
</style>
'Frontend > Vue' 카테고리의 다른 글
| Vue: 템플릿 문법에 대해서 (2) (0) | 2024.10.17 |
|---|---|
| Vue: 템플릿 문법에 대해서 (1) (0) | 2024.10.08 |