Vue.js를 사용한 첫 번째 양식: 쇼핑 목록 예제
Vue.js는 간단한 양식도 동적이고 효율적으로 만들 수 있는 프레임워크입니다. 이번 글에서는 Vue를 사용하여 쇼핑 목록을 관리하는 양식을 만드는 방법을 단계별로 설명하겠습니다. HTML과 Vue.js를 결합하여 더욱 효율적인 양식을 만들어 보세요.
1. 표준 HTML 양식 요소 추가
먼저, 기본적인 HTML 양식 요소를 추가합니다. 여기에는 항목 이름과 수량을 입력할 수 있는 텍스트 필드와 숫자 필드가 포함됩니다.
<form>
<p>Add item</p>
<p>Item name: <input type="text" required></p>
<p>How many: <input type="number"></p>
<button type="submit">Add item</button>
</form>
2. Vue 인스턴스 생성 및 v-model 연결
이제 Vue 인스턴스를 생성하고 양식 입력 요소를 Vue 데이터 속성과 연결합니다. 이를 통해 입력 값이 Vue 데이터와 동기화됩니다.
<div id="app">
<form>
<p>Add item</p>
<p>Item name: <input type="text" required v-model="itemName"></p>
<p>How many: <input type="number" v-model="itemNumber"></p>
<button type="submit">Add item</button>
</form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
shoppingList: [
{ name: 'Tomatoes', number: 5 }
]
}
}
})
app.mount('#app')
</script>
3. 메소드 추가 및 기본 새로 고침 방지
양식이 제출될 때 항목을 목록에 추가하고 브라우저의 기본 새로 고침을 방지하기 위해 메소드를 추가합니다.
<form v-on:submit.prevent="addItem">
4. 항목 추가 및 양식 초기화 메소드 생성
쇼핑 목록에 항목을 추가하고 양식을 초기화하는 메소드를 생성합니다.
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
}
this.shoppingList.push(item);
this.itemName = null;
this.itemNumber = null;
}
}
5. 자동 업데이트된 쇼핑 목록 표시
v-for을 사용하여 양식 아래에 자동으로 업데이트된 쇼핑 목록을 표시합니다.
<p>Shopping list:</p>
<ul>
<li v-for="item in shoppingList">{{ item.name }}, {{ item.number }}</li>
</ul>
전체 코드 예제
다음은 첫 번째 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를 사용한 첫 번째 양식</title>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="addItem">
<p>Add item</p>
<p>Item name: <input type="text" required v-model="itemName"></p>
<p>How many: <input type="number" v-model="itemNumber"></p>
<button type="submit">Add item</button>
</form>
<p>Shopping list:</p>
<ul>
<li v-for="item in shoppingList">{{ item.name }}, {{ item.number }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
shoppingList: [
{ name: 'Tomatoes', number: 5 }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
}
}
})
app.mount('#app')
</script>
</body>
</html>
v-model의 동작
v-model을 사용하여 입력 필드와 Vue 인스턴스 데이터를 연결하면, HTML 입력 요소가 변경될 때 Vue 데이터가 자동으로 업데이트됩니다.- 반대로 Vue 데이터가 변경되면 HTML 입력 요소도 자동으로 업데이트됩니다.
양방향 바인딩
v-model을 사용하면 양방향 바인딩이 가능합니다. 즉, 양식 입력 요소가 Vue 데이터 인스턴스를 업데이트하고 Vue 인스턴스 데이터가 변경되면 입력 요소도 업데이트됩니다.
동적 체크박스 추가
이 예제에서는 체크박스를 사용하여 항목이 중요한지 여부를 표시하고, v-model을 통해 Vue 데이터와 동기화하는 방법을 보여줍니다.
<div id="app">
<form>
<p>
Important item?
<label>
<input type="checkbox" v-model="important">
{{ important }}
</label>
</p>
</form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
important: false
}
}
})
app.mount('#app')
</script>
결론
이 예제들을 통해 Vue.js의 v-model 기능을 학습하고, 양방향 데이터 바인딩을 통해 동적인 양식을 쉽게 만들 수 있습니다. 이 코드를 활용하여 다양한 양식을 구현해 보세요. 더욱 복잡한 기능도 쉽게 추가할 수 있을 것입니다.
글 출처: w3schools.com