[VUE.JS] 뷰 디렉티브 v-bind 사용하기





저번 포스팅에선 뷰 디렉티브의 기본적인 9가지에 대해서 알아 보았습니다.


이번 포스팅에선 뷰 디렉티브중 v-bind에 대해서 알아볼텐데요



v-bind는 제이쿼리의 attr 과 비슷한 기능을 한다고 보시면 됩니다.



이번 포스팅에도 cnd로 불러와 jsbin 에서 실습을 해보겠습니다.



사용법은 이전 포스팅을 참고하세요


2018/02/19 - [Yame Programmer/VUE.JS] - [VUE.JS] VUE[뷰] 시작해보기

2018/02/22 - [Yame Programmer/VUE.JS] - [VUE.JS] 뷰 디렉티브 사용해보기





1. v-bind는 어떤 기능일까?



v-bind는 제이쿼리의 attr과 비슷한 역할을 한다고 했는데


이건 엘리먼트의 상태값을 바꿔줄때 사용하기 때문에 저런 언급을 했습니다.



일단 예를 들어



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
 
  <img id="img" src="https://t1.daumcdn.net/cfile/blog/2119CF4157F6360D2F"/>
 
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs


이런 html 코드를 작성하면





이렇게 웃는 스마일 이미지가 나타납니다.



이때 자바스크립트로 해당 이미지를 바꾸기 위해서


제이쿼리에선


1
$("#img").attr("src","다른이미지 ");
cs




이런식으로 바꿔주죠


일단 우린 vue를 공부하고 있으니까



vue에선 어떻게 사용 할까요?





2. 엘리먼트 속성을 변경하는 방법




1) 틀린 예


v-bind 라는걸 모르는 상태에선


아마 이렇게 사용 할 것 같아요





html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
 
  <img id="img" src="{{smile}}"/>
 
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js



1
2
3
4
5
6
7
8
9
10
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 지닙니다
data: {
name: 'Vue',
smile: 'https://t1.daumcdn.net/cfile/blog/2119CF4157F6360D2F'
}
});
 
cs






{{}} 태그 안에 값을 넣는 방식으로 시도를 했을겁니다.


하지만 이렇게 하면





이런 에러가 나타나게 됩니다.



설명을 보시면 v-bind를 사용하라고 나오죠



올바른 사용법을 알아 볼까요?



2) 올바른 예(v-bind 사용)




html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
 
  <img id="img" v-bind:src="smile"/>
 
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js


1
2
3
4
5
6
7
8
9
10
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 지닙니다
data: {
name: 'Vue',
smile: 'https://t1.daumcdn.net/cfile/blog/2119CF4157F6360D2F'
}
});
 
cs






이렇게 작성하면 정상적으로 이미지가 나타나게 됩니다.



여기서 이미지를 제이쿼리에서 attr을 사용하듯 스크립트를 사용해 동적으로 바뀌게 하려면?



.






3. 스크립트를 이용해 동적으로 엘리먼트 속성 바꾸기


html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
 
  <img id="img" v-bind:src="feel?smile:bad"/>
 
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




js


1
2
3
4
5
6
7
8
9
10
11
12
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 지닙니다
data: {
name: 'Vue',
feel:true,
smile: 'https://t1.daumcdn.net/cfile/blog/2119CF4157F6360D2F',
bad:'https://i.ytimg.com/vi/ir4NgczUrNY/hqdefault.jpg'
}
});
 
cs




이렇게 작성을 해주신후


콘솔창에서





app.feel = false


app.feel = true



요렇게 입력해주시면



false일때는 우는 에비츄가 나오고


true일때는 웃는 스마일 이미지가 나타나게 됩니다.




그런데 코딩할때마다  v-bind 입력하는게 귀찮기도 하고 코드도 길어지는데



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
 
  <img id="img" :src="feel?smile:bad"/>
 
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




이렇게


v-bind:src="변수" -> :src="변수"


해도 동일하게 적용이 됩니다


익숙해지면 어마어마하게 편할것 같아요!



vue의 v-bind 디렉티브를 사용하면 훨씬 편하고 빠르게 프론트 개발이 가능하게 됩니다.







오늘은 vue의 v-bind 기능에 대해 포스팅을 해봤습니다.


다음 포스팅은 아직 포스팅 하지 않은 나머지 디렉티브에 대해서 포스팅 하겠습니다.




저작자표시 비영리

'Yame Programmer > VUE.JS' 카테고리의 다른 글

[VUE.JS] 뷰 디렉티브 v-for [반복] 사용하기  (1) 2018.02.28
[VUE.JS] 뷰 디렉티브 사용해보기  (0) 2018.02.22
[VUE.JS] VUE[뷰] 시작해보기  (0) 2018.02.19

+ Recent posts

티스토리툴바