Vue 에서도 동적 데이터 바인딩을 아주 쉽게 해결할 수 있다. Vue 에서는 컴포넌트의 인스턴스의 데이터를 화면에 보이게 하고, 데이터가 변경되면 화면도 즉각 업데이트 할 수 있다.
1. data / methods
모두 Vue 컴포넌트 인스턴스에 정의하는 옵션이다. data 옵션에 변수를 정의하고, methods 옵션에 함수를 정의하여 변수를 연산시키는(?) 방식이다.
const app = Vue.createApp({
data() {
return {
count: 4,
msg: 'hello',
...
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})
위와 같이 data 함수에서 반환된 객체의 속성들(count, msg, ...)은 HTML 로 바인딩이 가능하다. 또한 event 로부터 호출된 methods 옵션의 함수들은 data 속성들을 업데이트 할 수 있다. this 는 인스턴스 자신, 컴포넌트의 인스턴스를 참조한다. 매우 자주 사용하게 될 것이다. methods 를 정의할 때 화살표 함수(=>)를 사용하면 this 값을 바인딩하지 못하므로 참고한다.
2. data binding
data 에 정의된 속성들은 다음과 같이 HTML 에서 바인딩 할 수 있다.
<span>메시지: {{ msg }}</span>
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}
이중 중괄호 구문 {{ Mustache }} 을 사용한 문자열 보간법(text interpolation) 이다. 위 예제에서는 컴포넌트 인스턴스의 msg 속성을 바인딩하였으며, 컴포넌트 인스턴스의 msg 속성이 변경될 때마다 템플릿 구문의 msg 속성 역시 즉각 갱신된다. 또한 자바스크립트 표현식도 가능하다. 문자열 보간법은 html 태그 속성에는 사용할 수 없으며, 이 때는 v-bind 디렉티브로 대체할 수 있다.
<div v-bind:id="dynamicId"></div>
<div v-bind:id="'list-' + id"></div>
Vue.js 에서는 태그 속성으로 v- 로 시작하는 디렉티브(directive) 를 사용할 수 있으며, 마찬가지로 반응형으로 컴포넌트 인스턴스의 데이터를 바인딩하여 갱신하는데 유용하다.
<a v-bind:href="url"> ... </a>
<a :href="url"> ... </a>
<a :[key]="url"> ... </a>
<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>
<a @[event]="doSomething"> ... </a>
<form v-on:submit.prevent="onSubmit">...</form>
- v-bind : 기존 태그의 속성에 데이터 바인딩 가능. (약어로 v-bind 생략가능)
- v-on : 기존 이벤트를 수신하여 메소드 호출. (약어로 @ 를 사용하여 v-on: 생략가능)
- v-on:submit.prevent 는 form 태그에 거의 고정적으로 사용되며, event.preventDefault()를 호출하도록 지시한다.
- [] : 대괄호를 사용하여 태그 속성이나 이벤트를 지정하는 것도 가능하다.
WRITTEN BY
- 손가락귀신
정신 못차리면, 벌 받는다.
