vue.js 2 또는 3 버전에 대한 비교 및 Composition API 알아보기
2024. 3. 11. 23:08
const { createApp, ref } = Vue;는 객체 비구조화 할당(destructuring assignment)을 사용하여 Vue에서 createApp과 ref를 가져오는 것을 나타냅니다. 이것은 Vue.js 3의 특징 중 하나로, Composition API를 사용할 때 자주 활용됩니다. createApp은 Vue 애플리케이션을 생성하는 함수이고, ref는 반응적인 데이터를 생성하는 함수입니다. 이들은 Vue.js 3에서 Composition API를 사용할 때 자주 사용되는 핵심 함수입니다. 이는 createApp과 ref를 가져온 후 이를 사용하여 Vue 애플리케이션을 생성하고 mount 합니다. 이렇게 함으로써 Vue.js 3에서 Composition API를 활용하여 코드를 더 간결하고 유연하게 작성할 수 있습니다.
vue.js 2 버전
Vue.js 2에서 사용되는 기본적인 코드입니다. 데이터(data)와 메서드(methods)가 모두 Vue 인스턴스 내에 선언되어 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 2 Todo List</title>
<!-- Vue.js 2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<!-- Vue.js 2 Todo List -->
<div>
<h1>Vue.js 2 Todo List</h1>
<input type="text" v-model="newTodo" @keyup.enter="addTodo" placeholder="새로운 할 일 추가">
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="deleteTodo(index)">삭제</button>
</li>
</ul>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addTodo: function() {
if (this.newTodo.trim() !== '') {
this.todos.push(this.newTodo.trim());
this.newTodo = '';
}
},
deleteTodo: function(index) {
this.todos.splice(index, 1);
}
}
});
</script>
</body>
</html>
Composition API를 사용한 Vue.js 3 코드
Composition API를 사용하여 데이터와 메서드를 작성했습니다. setup() 함수 내에서 데이터와 메서드를 정의하고, 이를 외부에 반환하여 Vue 애플리케이션에 사용합니다. 이러한 방식으로 코드를 작성하면 데이터와 메서드를 더 모듈화하고 재사용할 수 있으며, 코드의 가독성을 높일 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 3 Todo List</title>
<!-- Vue.js 3 CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body>
<div id="app">
<!-- Vue.js 3 Todo List -->
<div>
<h1>Vue.js 3 Todo List</h1>
<input type="text" v-model="newTodo" @keyup.enter="addTodo" placeholder="새로운 할 일 추가">
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="deleteTodo(index)">삭제</button>
</li>
</ul>
</div>
</div>
<script>
const { createApp, ref } = Vue; // Vue에서 createApp과 ref를 가져옴
const app = createApp({
setup() {
const newTodo = ref(''); // 반응적인 데이터 생성
const todos = ref([]); // 반응적인 데이터 생성
const addTodo = () => {
if (newTodo.value.trim() !== '') {
todos.value.push(newTodo.value.trim());
newTodo.value = '';
}
};
const deleteTodo = (index) => {
todos.value.splice(index, 1);
};
// Return reactive data and methods
return {
newTodo,
todos,
addTodo,
deleteTodo
};
}
});
app.mount('#app');
</script>
</body>
</html>'프로그래밍 > VueJS' 카테고리의 다른 글
| [vue.js] LIST 와 페이징 PAGING 이전, 다음 버튼 (2) | 2024.04.24 |
|---|---|
| Vue.js & web api 를 활용한 동적 select box 구현하기 (using cdn) - 2탄 (0) | 2024.03.03 |
| vue.js : watch 활용하여 instance 간 데이터 전달하기 (2) | 2024.02.26 |
| vue.js : created 라이프사이클, 어떤 용도일때 사용할까? (1) | 2024.02.26 |
| vue.js : data 초기화 과정 - created 와 mounted 그리고 event bus 활용하기 (2) | 2024.02.26 |