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를 추가한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
body { font-family: tahoma; color:#282828; margin: 0px; } .nav-bar { background: linear-gradient(-90deg, #84CF6A, #16C0B0); height: 60px; margin-bottom: 15px; } .product { display: flex; flex-flow: wrap; padding: 1rem; } img { border: 1px solid #d8d8d8; width: 70%; margin: 40px; box-shadow: 0px .5px 1px #d8d8d8; } .product-image { width: 80%; } .product-image, .product-info { margin-top: 10px; width: 50%; } .color-box { width: 40px; height: 40px; margin-top: 5px; } .cart { margin-right: 25px; float: right; border: 1px solid #d8d8d8; padding: 5px 20px; } button { margin-top: 30px; border: none; background-color: #1E95EA; color: white; height: 40px; width: 100px; font-size: 14px; } .disabledButton { background-color: #d8d8d8; } .review-form { width: 400px; padding: 20px; margin: 40px; border: 1px solid #d8d8d8; } input { width: 100%; height: 25px; margin-bottom: 20px; } textarea { width: 100%; height: 60px; } .tab { margin-left: 20px; cursor: pointer; } .activeTab { color: #16C0B0; text-decoration: underline; } |
이미지를 다운로드해서 assets 폴더 아래에 복사한다.
app.js에 image 데이터를 추가한다.
1 2 3 4 5 6 7 |
var app = new Vue({ el: '#app', data: { product: 'Socks', image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg' } }); |
index.html에 product_style.css를 추가하고 image 라는 데이터 모델을 html attribute에 바인딩한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="product_style.css"> </head> <body> <div id="app"> <div class="product"> <div class="product-image"> <img :src="image"> </div> <div class="product-info"> <h1>{{product}}</h1> </div> </div> </div> <!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="app.js"></script> </body> </html> |
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