vue introduction - 속성 바인딩

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를 추가한다.

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;
}

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 데이터를 추가한다.

var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks',
    image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg'
  }
});

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에 바인딩한다.

<!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>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

</div>

<h1>{{product}}</h1>

</div>

</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