실전 코드로 배우는 Vue.js

57

CHAPTER 02

Vue의 기본 작동 방식

Vue

는 [그림

2

-

12

]처럼 사용자와 상호작용하며

list

배열에 값을 자동으로 추가하거나 제

거한다.

그림

2-12

사용자가 선택한 항목이 목록에 적용되는 화면 사용자가 선택한 항목이 목록에 적용되는 화면

2.82.8

vv

--

modelmodel

..

lazylazy

수정자 수정자

사용자가 키를 누를 때마다 데이터값을 업데이트하는 기능은 손이 많이 가는 작업이다. 특히

해당 값을 다른 위치에 표시하려는 경우에는 더욱 그렇다.

Vue

는 데이터 변화에 따라 템플릿

UI

를 다시 렌더링한다는 점을 떠올려보자. 모든 키 입력을 양방향으로 동기화하면 애플리케

이션이 불필요한 재렌더링을 반복할 잠재적인 위험이 있다. 이러한 오버헤드를 줄이려면 평

범한

v

-

model

대신

v

-

model

.

lazy

수정자로 데이터 모델을 바인딩해야 한다.

const NameInput = {

template: `

<label for="name">

Write your name:

<input

v-model.lazy="name"

placeholder="Enter your name"

id="name"

>

</label>`,

data() {

return {

name: '',