Vue 배우기 (1) - 속성 바인딩, 디렉티브, 단축어

Vue 객체로 속성에 바인딩하기

기본적으로 HTML 코드가 브라우저에서 DOM으로 파싱이 되고 나면,
기존에는 값을 바꾸거나 이벤트를 추가하는 등의 동작을 하려면
DOM 객체에 직접 접근해서 변경해줘야 했다.

Vue에서는 엘리먼트에 이벤트, 변수등을 바인딩하여
스크립트에서 더 쉽게접근할 수 있도록 하였다.

// html
<button :disabled="disabled" @click="handleClick"> 버튼 </button>

// js
<script>
export default {
  data() {
    // disabled 바인딩
    return {
      disabled: false,
    }
  },
  methods: {
    // handleClick 바인딩
    handleClick() {
      this.disabled = !this.disabled;
    }
  },
}
</script>

---

디렉티브 (directive)

엘리먼트에 기본적으로 넘겨줄 수 있는 Prop들 외에도,
Vue에서 제공하는 Prop들이 있다.

앞에 v-가 붙는 prop들이 Vue에서 제공해주는 것들인데,
이 v-를 디렉티브라고 한다

<button
  v-bind:disabled="disabled"
  v-on:click="handleClick"
  v-if="visible"
>
  <p v-for="item in lists">
    {{ item }}
  </p>
</button>

---

단축어

위에서 사용한 v-bind와 v-on은 간단하게 축약해서 사용할 수 있다.

// v-bind:prop -> :prop
<button v-bind:disabled="disabled" />
<button :disabled="disabled" />

// v-on:click -> @click
<button v-on:click="handleClick" />
<button @click="handleClick" />

---

익스프레션 사용하기

리액트와 달리 Vue에서는 문자열에 Expression을 쓰는 괴이한 형태다.
나는 리액트를 써와서 그런지 굉장히 당황했다.

<button
  @click="handleClick(disabled)"
/>

리액트는 string과 변수를 명확히 구분하는 편이라
개인적으로는 리액트가 더 취향