했던것들/Vue.JS
v-once, v-model(양방향 바인딩)
2DC
2023. 2. 9. 16:49
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Events</h1>
</header>
<section id="assignment">
<h2>Event Practice</h2>
<button v-on:click.middle="btnAlert">Show Alert</button>
<hr />
<input type="text" v-on:input="textInput" v-bind:value="text"/>
<p v-once>v-once는 초기값을 유지시켜줘요 : {{ text }}</p>
<p>{{ text }}</p>
<hr />
<input type="text" v-on:input="setEnterText" v-on:keyup.enter="setConfirmEnterText"/>
<p>{{ confirmEnterText }}</p>
</section>
</body>
</html>
JavaScript
const app = Vue.createApp({
data() {
return {
text: "initial value",
enterText: "OutPut",
confirmEnterText: "Not Confirmed"
}
},
methods: {
btnAlert() {
alert("hi")
},
textInput(event) {
this.text = event.target.value
},
setEnterText(event) {
this.enterText = event.target.value
},
setConfirmEnterText() {
this.confirmEnterText = this.enterText
}
}
}).mount("#assignment")
v-once
- v-once가 붙은 HTML 엘리멘트는 초기에 한번만 렌더링 된다.
- 동적 state를 출력하더라도 해당 HTML 엘리먼트의 DOM은 변하지 않는다.
v-model
- v-model은 양방향 바인딩의 축약 기능이다.
- v-on:input으로 텍스트의 변화를 감지한 뒤 state를 업데이트하고,
업데이트된 state는 v-bind:value에 의해 엘리먼트에 바인딩된다. - 따라서 state를 변경해주는 이벤트 핸들러가 추가적으로 필요하다.
- 이 때, v-on:input="이벤트핸들러"와 v-bind:value="state"는 v-model로 바꿀 수 있다.
- 즉, v-model을 사용해서 이벤트 핸들러도 없앨 수 있고, v-on과 v-bind 코드도 없앨 수 있다.
