投稿した質問数 18

1

안녕하세요 :)

v-bind 관련한 질문이시죠?

• v-bind 는 Vue에서 컴포넌트 또는 HTML요소의 속성에 값을 적용(바인딩)할 때 사용하는 Vue 디렉티브 입니다.

• 주로 동적(반응형 상태)인 값을 바인딩 할 때 쓰이며, 그 스펙은 일반 변수(반응적이지 않은)도 바인딩 할 수 있습니다.

• eg2data님 말씀처럼 주로 반응형 상태에만 바인딩 할 때 사용하는데요. 그렇지 않은 예시를 들면 애플리케이션에서 메뉴 목록을 담고있는 변수가 있다고 가정하겠습니다.

  const menus = ['공지사항', 'Q&A', '커뮤니티'];

  이러한 메뉴 목록(menus)을 렌더링 할 때는

  <ul>
      <li v-for="menu in menus" :key="menu">{{ menu }}</li>
  </ul>

  이와 같이 렌더링 할 수 있으며 이 때 key 에 값을 바인딩 할 때 사용할 수 있습니다. 또한 <li> 요소가 자식 컴포넌트로 정의되어 있는 경우 값을 자식 컴포넌트에 전달 하기 위하여 사용할 수 있겠죠?

  <ul>
      <CustomLIComp
          v-for="menu in menus"
          :key="menu"
          :menu="menu"
      />
  </ul>

이제 배우시는 단계이다 보니 익숙하지 않고 지금은 정확히 이해가 되지 않을 수 있는데요. 반복해서 사용하다 보면 이해가 빡~! 오고 익숙해 지실 거에요~!

화이팅 🙂

0

추가로, 반응형이 아닌 데이터를 v-bind하는 것은 어떤 목적으로 사용하게 될까요?

vue에서 반응형이 아닌 데이터를 선언하고 사용하는 것 자체가 좀 어색하게 느껴져서요.