jojiiiiyoung
50+ Views

[vue.js] DOM에 binding하기

페이지를 개발할 때 사용자에게 적절한 리액션을 보이는 것은 중요한 일인 것 같다.
사용자가 어떤 응답을 받기 위해서 클릭을 했을 때 페이지가 그에 해당하는 응답을 바로 줄 수 없는 경우 스피너를 보여줌으로써 사용자의 행동에 빠른 응답을 주는 것과 같은 것 말이다.

이러한 대부분의 응답들은 DOM 엘리먼트의 어떤 속성들을 변경시켜야 한다.

사용자가 클릭을 했을 때 스피너 엘리먼트의 visible속성을 none에서 visible로 변경하는 것과 같은 것은 vue.js에서 어떻게 해야할까? (리액트에서는 state를 설정해서 가능할 것이다)

결론부터 얘기하면 디렉티브라고 불리는 vue.js의 속성을 HTML 태그안에 기록하여 수정가능하다. 디렉티브는 여러 종류가 있는데 공통점은 v-라는 prefix가 붙어있다.
특히 v-bind 속성은 DOM의 속성과 data를 바인딩하는 디렉티브이다. 위의 예제의 경우에는 DOM 엘리먼트의 style속성의 visiblity를 hidden혹은 visible로 설정하여 구현 가능 할 것이다.

HTML에서와 동일하게 엘리먼트를 선언한 후,
<div id="app" v-bind:style="styles">
hidden message
</div>
styles라는 데이터를 style속성에 바인딩 하고자 v-bind:style="styles"라는 구문을 추가했다.

var app = new Vue({
el: '#app', //위의 HTML에 선언한 엘리먼트
data: {
styles: { visibility: "hidden" }
}
})

사실은 위의 예제의 경우 디렉티브의 일종은 v-show를 통해 훨씬 더 간단하게 구현할 수 있다.
내일 디렉티브에 대해서 좀 더 정리해봐야겠다.
0 Likes
0 Shares
Comment
Suggested
Recent