attribute binding이란

DOM에서 Node는 3가지 값을 가진다. 첫번째가 엘리먼트, 두번째가 엘리먼트 뒤에 나오는 속성(attribute), 그리고 자식노드.

여기서 attribute binding 이란 html 의 속성에 Vue 인스턴스의 data 속성을 어떻게 연결하느냐라는 바인딩 문법을 배우게 된다.

예를 들어 <p id=”title”>Hi</p> 와 같은 노드가 있다고 하면 p가 엘리먼트, id가 속성, Hi가 자식 노드이다. id라는 속성인 title을 Vue의 data 와 묶어주는것이 바인딩이다.

attribute binding 문법

product_style.css를 추가한다.

이미지를 다운로드해서 assets 폴더 아래에 복사한다.

app.js에 image 데이터를 추가한다.

index.html에 product_style.css를 추가하고 image 라는 데이터 모델을 html attribute에 바인딩한다.

html attribute 에 데이터 모델을 바인딩하는 방법은 v-bind:속성명이다.

short hand 표현으로 v-bind를 생략햐고 :속성명으로 사용해도 동일하다.

attribute 중에 class와 style은 너무 많이 사용되므로 class binding, style binding 문법이 별도로 있다.

+ todo

h1 product 헤더 아래에 a 태그를 추가하고 Vue 인스턴스 data 속성에 link 키와 a 태그의 href 속성을 바인딩하자. link의 value는 ”
https://www.amazon.com/s?k=socks” 을 할당하고 클릭하면 새창에서 열리도록 한다. p태그의 자식 노드에는 “More products like this”를 할당한다.

See the Pen Challenge 2 – Intro to Vue by Gregg Pollack (@GreggPollack) on CodePen.0