[vue.js] v-bind 그리고 v-bind의 속성 연결

안녕하세요 시란입니다. 

 

요즘 vue.js 공부를 시작했습니다. 

vue.js tutorial 공식 사이트를 통해서 코드 해석과 의미들을 보면서 익히고 있습니다. 

https://ko.vuejs.org/tutorial/

Tutorial | Vue.js

위의 사이트에서 혼자서도 공부 할 수 있답니다. 

왼쪽은 해당 파트에 대한 설명이 나와있고, 오른쪽은 내가 실습할 수 있는 공간이 나와있습니다. 

문제도 나오고, 이걸 풀어보고 해답도 나와있는 형태입니다. 

 

그런데 저번시간 es6 함수표현부터 해서.. 이번에 막힌 부분은 v-bind부분과 style 연결 부분이였어요. 

이거 찾아보니 모르던 부분이더라구요. 이런 기능들이 있었구나....

이왕 찾아보고 공부한거, 그리고 다른 사람들도 비슷하게 느끼고 검색할꺼 같기도 하고... 

그래서 제가 찾아본 내용들을 공유 및 정리하고자 이번 포스팅 작성을 하였습니다. 

 

먼저 기본 개념부터 정리해야겠죠? 

먼저 v-bind 입니다. 

bind 뜻을 찾아보면 다음과 같습니다. 

묶다 엮다 란 뜻이에요 

 

v-bind는 이 뜻 그대로 어떤것과 연결하겠다. 엮겠다란 의미로 생각하시면 편해요.

예를 들어서 

<input type="text" v-bind:value="name">

이렇게 사용됩니다. 

value 속성과 연결한다는 의미가 되겠죠? 

이렇게만 보면.. 뭐야 value랑 연결해서 뭐하는건데 그게 ? 란 생각이 들꺼에요. 

 

<script setup>
import { ref } from 'vue'

const message = "안녕"
</script>

<template>
  <h1>{{ message }}</h1>
  <input type="text" >
</template>

자 이렇게 샘플을 준비했어요 .

그냥 기본적인 샘플입니다.  분석해보자면 

const message에 안녕이라는 값을 할당했습니다. 

 

그리고 스크립트 파트에서 

먼저 <h1>태그를 통해 message 내용을 보여주고, 

input태그를 통해서 데이터를 받을수 있게 만들어봤습니다. 

결과는 위와같이 나오겠네요.  단순하죠?

근데 코드를 아래와 같이 수정해보겠습니다. 

<script setup>
import { reactive, ref } from 'vue'

const message = ref('안녕 Vue!')
// const message = "안녕"
</script>

<template>
  <h1>{{ message }}</h1>
  <input type="text" v-bind:value="message">
<!--   <input type="text" > -->
</template>

자 기존 태그들은 일단 주석처리 했구요. 

const message에는 안녕 vue! 라는 값을 할당했고 ref를 통해서 참조 걸어놨습니다.
(이제 이 값은 변화를 실시간으로 감지해서 vue에서 처리될 것 입니다. )

그리고 나서 input 태그에 v-bind를 통해서 값을 참조할꺼고 그 value는 message의 값을 참조할껍니다. 

이렇게 간단하게 구성하고 결과를 볼까요?

 

네 input 태그의 값에 message와 같은 값이 들어가게 됩니다. 

만약 message내용이 어떤 트리거에 의해서 변화한다면 input태그의 값과 h1태그의 값이 동시에 같이 변화하게 됩니다. 

즉 실시간으로 message의 값이 연결, 묶이게 되는거죠.

 

v-bind는  value 말고도 다양한 속성값과 연결될 수 있습니다. 

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">안녕하세요 </h1>
</template>

<style>
.title {
  color: red;
}
</style>

위와 같이 class 속성값에 연결할 수도 있습니다. 

참고로 v-bind의 경우 ':' 로 축약할수도 있답니다. 많이 사용하는 문법이니 외우도록 합시다!

 

 

위에 있는 코드 style 대신 true / false 를 이용하여 :class로 바인딩도 가능합니다. 

바인딩을 오브젝트로 처리할때 다음과 같이 처리하면 쉽게 할 수 있습니다. 

:class="{css 클래스명 : true / false}

이것이 정말 유용한 기능인 이유는 

class 와 바인딩을 하는데, css 클래스명의 상태가 true 인지 false인지에 따라서 

css를 적용하고 안하고를 결정할 수 있습니다. 

 

대표적으로 vue.js 튜토리올 사이트에서 예시가 나오죠?

<script setup>
import { ref, computed } from 'vue'

let id = 0

const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'HTML 배우기', done: true },
  { id: id++, text: 'JavaScript 배우기', done: true },
  { id: id++, text: 'Vue 배우기', done: false }
])

const filteredTodos = computed(() => {
  return hideCompleted.value
    ? todos.value.filter((t) => !t.done)
    : todos.value
})

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, done: false })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

 

조금 길죠? 해석을 해볼까요? 

 

아래부터 볼께요 

스타일 태그 입니다.  .done을 통해서 .done 상태가 된다면 text-decoration을 통해 라인이 생기게 css를 설정해놨네요. 

적용된다면 이렇게 되겠네요

다음은 template부분이에요. 

 

기본적인 form태그가 있고, li 태그와 button 태그가 있습니다. 

여기서 우리가 주목할 부분은 span 부분입니다. 

<span: class ="{done: todo.done}"> {{todo.text}}  </span>

자, 우리가 배웠던 :class = "{클래스명: true/false}" 이 보이죠?

 

todo.done은 script 에서  true, false 값을 부여해줬어요. 

보이시죠? 

todos의 값들은 각각 id와 text 그리고 done 이렇게 3가지 항목의 값을 가지고 있어요. 

done: true, false 값에 따라서 span태그의 속성이 적용되고 안되고가 결정됩니다. 

 

자 그리고 이 true, false 값은 아래의 버튼 부분에서 토글되게 됩니다. 

todo.done과 v-model을 이용해서 연결시켰습니다. 

그렇게 되면 checkbox가 클릭상태이면 true, 아니면 false 상태가 되고 이게 todo.done과 연동이 자동으로 되죠. 

자동으로 토글 시스템이 완성되는 형태에요. 신기하죠? 

 

위쪽의 computed 까지 설명하면 너무 긴글이 될 것 같으니... 다음 포스트때 설명하도록 하겠습니다. 

 

정말 어렵네요. 

저 또한 여러번 곱씹어 보고 제 코드로 만들어야겠습니다. 

 

같이 열심히 vue.js 공부해봐요.

그럼 다음 포스팅에서 만나요.