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