[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

[VUE.JS] VUE[뷰] 시작해보기





요새 프론트 엔드 라이브러리로 핫하다는 vue를 접해 보았다.


접했다는게 정말 손끝으로 살짝 건들여본 정도 ㅋㅋㅋ



얼마전 node.js 와 react.js를 하고 아주아주 기초적인 파이썬을 해보고


이번엔 vue를 건들여 본다 ㅋㅋ





react를 공부해놓고 왜 이번엔 vue 를 사용하는가 라는 물음에 대한 대답은


"그냥! 개발자라면 새로 나왔다는거 한번쯤 건들여 봐야지!"


라고 할수 있겠지만;;;



일단 문서상으론 react보다 뛰어나다고 하니 한번 해보는게 나쁘진 않을 것 같은데


스택오버플로우에서 참고할 레퍼런스들이 아주 적고


react나 angular에 비해서 실제 업무에 적용된 사례가 적기도 해서


현업에서 바로 실서비스에 적용 하는건 아직 무리라고 보고


그냥 한번쯤 해보는건 좋을 것 같다.



이번에 하는 포스팅은 뭔가 대단하게 셋팅을 하고 설정파일들을 만지작 거리는게 아니라


정말 아주 간단하게



CDN으로 불러와서 마치 제이쿼리 쓰듯 사용해 보는 것에 대해서 포스팅 해보도록 한다.







일단 뭐 프로젝트 만들 필요도 없이 맛만 볼거니까


jsBIn 이나 jsfiddle 에서 사용해 보는 것만 테스트 해보도록 하자




jsbin


https://jsbin.com/xojatohopi/edit?html,js,output





jsbin 의 기본적인 화면이다.


여기서 아주아주 간단하게


제이쿼리 집어넣듯



<script src="https://unpkg.com/vue/dist/vue.js"></script>


한줄을 추가해 주도록 하자



1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 hello
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs




이렇게 한줄을 추가 해주면


우린 vue.js 를 사용할 준비가 끝난 것이다.



그럼 이제 body 안에


간단한 문장을 써보도록 하자




.








<h1>hello, yamea</h1>


이라는 한줄을 추가 했는데


이것만 가지고는 vue의 어떤 뭘 사용하는지 모르겠다



여기서 살짝만 변형 시켜 보자



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




이렇게 작성 하면




이렇게 나온다



이제 vue의 기능을 이용해 저 {{name}} 의 텍스트를 바꿔 보도록 하자



자바스크립트에 아래 코드를 추가 해준다



1
2
3
4
5
var app = new Vue({
  el:'#app',
  data:{name:"cheesu's yamea"}
  
});
cs




이런 스크립트 코드를 추가 해주면





짠!


이렇게 된다


마치 EL태그의 jstl 을 스크립트로 사용하는 것 같은 기분이 든다



그럼 여기서 추가로 한가지만 더 해보도록 하자



위의 콘솔 버튼을 클릭해서





app.name = "추천 눌러줘"


를 입력하고 엔터를 누르면 {{name}}의 내용이 바뀐다!





기본적인 기능은 여기까지다



아주 쉽지 않은가?


와.. 이정도면 그냥 써먹어도 되겠다


react를 처음 접할때보다 뭔가 장벽이 어마무시하게 낮아진 기분이다.


react보다 vue의 러닝커브가 훨씬 작다고 하니


간단하게 사이드 프로젝트 정도는 해볼만 한 것 같다.



나도 여기까지 밖에 안해봤으니


다음 포스팅에선 조금더 심화적인 단계로 넘어가 보도록 하자.

저작자표시 비영리

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

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

+ Recent posts

티스토리툴바