반응형
Vue.js를 사용하여 효율적인 코드를 작성하는 방법을 예를 들어 설명해 드리겠습니다. Vue.js는 자바스크립트 기반의 프런트엔드 프레임워크로, 데이터와 뷰를 연결하는 반응적인 웹 애플리케이션을 빌드하는 데 도움을 줍니다. 아래의 예제는 Vue.js를 사용하여 간단한 할일 목록 애플리케이션을 만드는 방법을 보여줍니다.
1. HTML 템플릿 작성: 먼저 HTML 파일을 작성하고 Vue 인스턴스와 데이터를 연결합니다.
<!DOCTYPE html>
<html>
<head>
<title>할일 목록</title>
</head>
<body>
<div id="app">
<h1>할일 목록</h1>
<input v-model="newTask" @keyup.enter="addTask" placeholder="할일 추가">
<ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task }}
<button @click="removeTask(index)">삭제</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</body>
</html>2. Vue 인스턴스 생성 및 데이터 정의: 다음으로, Vue 인스턴스를 생성하고 데이터와 메서드를 정의합니다.
new Vue({
el: '#app',
data: {
newTask: '',
tasks: []
},
methods: {
addTask: function () {
if (this.newTask.trim() !== '') {
this.tasks.push(this.newTask);
this.newTask = '';
}
},
removeTask: function (index) {
this.tasks.splice(index, 1);
}
}
});이 코드는 간단한 할일 목록을 만들고, 사용자가 할일을 추가하고 삭제할 수 있도록 합니다. 이 예제에서 중요한 점은 다음과 같습니다:
・v-model을 사용하여 입력 필드와 데이터를 양방향으로 바인딩합니다. 이로써 사용자가 입력한 내용이 newTask 데이터에 실시간으로 반영됩니다.
・v-for 디렉티브를 사용하여 배열의 각 항목을 반복하고 각 항목에 대한 데이터와 이벤트를 연결합니다.
・메서드를 사용하여 데이터 조작 및 이벤트 처리를 수행합니다.
이러한 방식으로 Vue.js를 활용하면 코드를 간결하게 유지하고, 데이터와 뷰 사이의 연결을 효율적으로 처리할 수 있습니다. 코드의 모듈화와 컴포넌트화도 Vue.js에서 중요한 개념 중 하나이며, 복잡한 애플리케이션에서도 유지보수 가능한 코드를 작성할 수 있습니다.
반응형
'Vue' 카테고리의 다른 글
| Vue 중요 메서드 정리 (0) | 2023.11.17 |
|---|---|
| Vue 로또 당첨번호 자동 생성하기 (0) | 2023.11.09 |
| Vue 대표적인 에러의 해결 방법 (0) | 2023.10.24 |
| Vue 속도 개선을 위한 코드 작성 방법 (1) | 2023.10.19 |
| Vue소스코드 자동 테스트 프로그램 작성 (0) | 2023.10.04 |
댓글