모든 Vue앱은 createApp
메서드를 사용해 새로운 앱 인스턴스를 생성하는 것으로 시작한다.
import { createApp } from 'vue'
const app = createApp({
/* 최상위 컴포넌트 옵션 */
})
createApp
에 전달하는 객체는 '컴포넌트'다. 모든 앱은 다른 컴포넌트를 자식으로 포함할 수 있는 최상위 컴포넌트 (The Root Component)를 필요로 한다.
import { createApp } from 'vue'
// 싱글 파일 컴포넌트에서 최상위 컴포넌트 앱을 가져옵니다.
import App from './App.vue'
const app = createApp(App)
싱글 파일 컴포넌트(Single-File Components: SFC, 일명 *.vue 파일)
:<template/>
,<script/>
및<style/>
블록으로 이루어진 하나의 vue 파일.
최상위 컴포넌트란 앱의 뼈대가 되는 컴포넌트로, 다른 컴포넌트를 포함하고 전체 앱의 기능과 모양을 결정한다. Vue에서는 일반적으로 중첩된 형태의 컴포넌트 트리를 구성하며, 각각의 컴포넌트들은 재사용 가능하고 독립적으로 사용될 수 있다.
아래는 'vue 프로젝트 구조 예시'다.
이처럼 vue의 컴포넌트는 트리 형태로 되어있다. 즉, 상위 컴포넌트(부모)가 하위 컴포넌트(자식)을 감싸고 있다. 그중 가장 가장 상위의 부모 컴포넌트를 최상위 컴포넌트라 부르고, 여기선 (일반적으로 거의) App.vue
가 최상위 컴포넌트이다.
createApp()
에 객체를 전달하여 옵션을 구성할 수 있다.
- data: function() {}
- data() {
return { // 값으로 객체를 반환 (키-값)
courseGoal: 'Finish'
'프로퍼티명: 프로퍼티값'
}
}
Vue에서는 데이터 이름을 '프로퍼티'라고 한다.
const app = createApp();
app.mount('#user-goal');
createApp
메서드를 통해 Vue 앱 인스턴스를 생성했다면, HTML의 코드 중 어떤 부분을 Vue 앱이 조절할지를 설정해줘야 한다. 이는 mount
를 통해 시행할 수 있다. 매개변수로 고유한 ID를 부여하여 특정 DOM 요소를 식별하도록 설정해줄 수 있다.
위와 같이 코드를 작성하는 경우, 생성한 Vue앱을 HTML코드의 <section>
과 연결하겠다는 의미가 된다. 이제부터 Vue기능을 통해 <section>
과 상호작용할 수 있다.
Vue로 HTML요소를 제어하는 경우, 해당 요소의 자식 요소 또한 제어할 수 있다!
const app = Vue.createApp({
data() {
return {
courseGoal: 'Finisfh'
};
}
});
app.mount('#user-goal');
<section id="user-goal">
<h2>My Course Goal</h2>
<p> {{ courseGoal }} </p>
</section>
<section id="user-goal">
<h2>My Course Goal</h2>
<p> {{ courseGoal }} </p>
<p>Learn more<a v-bind:href="vueLink">about Vue</a>.</p>
</section>
data() {
return {
courseGoal: 'Finish the course and learn Vue!',
vueLink: 'https://vuejs.org/'
};
}
단순히 데이터를 바인딩할때는 {{ }}
를 사용했다. 그러나 속성값을 바인딩 할때는 v-bind
를 사용해야 한다.
:
로 생략 가능<a :href="url">
<section id="user-goal">
<h2>My Course Goal</h2>
<p> {{ outputGoal() }} </p>
<p>Learn more<a v-bind:href="vueLink">about Vue</a>.</p>
</section>
methods: {
outputGoal() {
const randomNumber = Math.random();
if (randomNumber < 0.5) {
return 'Learn Vue!';
} else {
return 'Master Vue!';
}
}
}
methods 내에 함수를 기술할 수 있다.
동적으로 값 부여 가능.
export default {
name: 'HelloWorld',
data() {
return {
courseGoalA: 'Finish the course and learn Vue!',
courseGoalB: 'Master Vue and build amazing apps!',
vueLink: 'https://vuejs.org/'
};
},
methods: {
outputGoal() {
const randomNumber = Math.random();
if (randomNumber < 0.5) {
return this.courseGoalA;
} else {
return this.courseGoalB;
}
}
}
}
return에 바로 courseGoalA
를 입력하면 JavaScript는 courseGoalA란 이름의 변수나 상수를 찾는다. courseGoalA는 data 객체의 프로퍼티이지 변수도 상수도 아니기 때문에 찾을 수 없다. 이 경우, this를 사용할 수 있다.
this를 사용함으로써 우리는, Vue를 통해 data내의 객체를 참조할 수 있게 된다.
Vues는 data객체에서 반환하는 데이터 전체를 가져다가 데이터를 병합해서 전역 Vue 인스턴스 객체를 만든다. Vu.createApp 객체로 만든다 할 수 있다. 데이터 프로퍼티 3개 모두 Vue.createApp 객체가 관리하는 이면에서 사용할 수 있다. methods도 마찬가지.
this 키워드를 사용하면 전역 Vue 인스턴스 객체에 저장된 모든 데이터에 엑세스 할 수 있다.
<p v-html="outputGoal()"></p>
courseGoalB: '<h2>Master Vue and build amazing apps!</h2>',
이중 중괄호를 사용했을 때처럼 일반 텍스트로 출력하면 안 된다는 것을 알리는 것!
Vue는 HTML 요소에 이벤트 리스너를 추가하는 쉬운 방법을 제공하고 있는데, Vue 디렉티브(v-on)를 사용할 수 있다.
v-bind는 속성의 값을 설정하는데 사용되었다. 이벤트 리스너를 위해서는, v-on을 사용할 수 있다.
<template>
<header>
<h1>Vue Events</h1>
</header>
<section id="events">
<h2>Events in Action</h2>
<button v-on:click="this.counter++">Add</button>
<button v-on:click="this.counter--">Reduce</button>
<p>Result: {{ counter }}</p>
</section>
</template>
<script>
export default {
name: 'EventBinding',
data() {
return {
counter: 0
}
}
}
</script>
v-on:click="클릭을 감지했을때 수행할 코드 명시"