안녕하세요, 장지랩입니다.
회사에서 SM업무를 하다보면 SI에 비해 개발자로서 실력이 뒤떨어지지 않을까 하는 고민을 끈임없이 하게 되요 그러다 같은 고민을 갖고 있는 동료와 함께 웹서비스를 하나 개발해보기로 했어요.
우선 안써봤던 기술들을 써보자 해서 프론트엔드는 뷰.js가 채택되었습니다.
들어보기만 한 뷰JS에 대해 공부를 슬슬 할까합니다.
오늘 한내용에 대한 복습겸 포스팅입니다.
뷰JS는 프론트용 자바스크립트 프레임워크로 이에 대한 정의는 따로 적지는 않겠습니다.
저도 공부가 더 필요하거든요 추후.. 뷰JS란 무엇인가라는 포스팅으로 다루겠습니다.
1.vue.js 설치
그냥 뷰JS 스크립트만 임포트시켜주면 됩니다 헛헛..
CDN을 통해서 넣어줘도 되고, 직접 스크립트를 다운받아 넣어주셔도 됩니다.
스크립트를 다운받으시려면 아래 페이지에서 다운받으시면돼요.
https://kr.vuejs.org/v2/guide/installation.html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 개발자용 콘솔 추가 버전 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 배포용 버전 소스코드 압축 및 콘솔 로그 제거 -->2.vue.js 예제
2-1 Hello World 찍기
뷰JS가 스크립트에 맞게 랜더링해주는것같습니다.
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data:{
message : '안녕하세요 Vue!'
}
})
</script>
2-2 vue.js 엘리먼트 속성에 값 바인딩
기본적인 엘리먼트 텍스트 외에도 속성에도 값을 바인딩시켜줄 수 있습니다.
<div id="app-2">
<span v-bind:title="message">
내 위에 마우스를 올리면 잠시 동적으로 바인딩된 메시지를 볼 수 있습니다.
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data :{
message : '이 페이지는' + new Date() +'에 로드 되었습니다.'
}
})
</script>
2.3 조건문과 반복문
seen값을 사용해 dom의 구조에 바인딩하기
<div id="app-3">
<p v-if="seen">이제 나를 볼 수 있어요</p>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data : {
seen : true
}
})
</script><p>태그가 있지만 seen값이 false가 되면 감쪽같이 사라진다. dom의 구조에도 바인딩할 수 있다는것.
반복데이터 넣기
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el : '#app-4',
data:{
todos:[
{text :"javascript 배우기"},
{text : "Vue배우기"},
{text : '무언가 멋진것을 만들기'}
]
}
})
</script>
2.4 이벤트 리스너 사용
onclick event listner 추가
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
<script>
var app5 = new Vue({
el : '#app-5',
data : {
message : "메시지 뒤집기 텍스트"
},
methods : {
reverseMessage : function (){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
2.5 양방향 바인딩 v-model
뷰JS에서 v-model을 통해서 양방향 바인딩을 할 수 있습니다.
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
var app6= new Vue({
el:'#app-6',
data:{
message:'안녕 Vue!'
}
})
</script>
2.6 컴포넌트를 사용한 작성방법
컴포넌트는 Vue.js에서 중요한 추상적인 개념인것 같다. 다만 컴포넌트에 대한 이해가 아직 부족하며 아직까진 태그라이브러리, 혹은 미리 만들어진 양식? 정도로만 이해하고 있는 정도다. 맛만 보고 좀더 심도 깊게 들여다 볼 예정이다.
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
<script>
Vue.component('todo-item',{
props : ['todo'],
template:'<li>{{todo.text}}</li>'
})
var app7= new Vue({
el:'#app-7',
data:{
groceryList : [
{id : 0, text : "vegetables"},
{id : 1, text : "Cheese"},
{id : 's', text : "Whatever else humans are supposed to eat"}
]
}
})
</script>
모든 정보는 Vue.js 공식홈페이지로 보이는 곳에서 봤습니다.
초보자가 vue.js를 공부하기가 너무 좋으니 여기 들어가서 한번 구경해보셔요
https://kr.vuejs.org/v2/guide/installation.html
설치방법 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
보충해주실 점이나 잘못된 곳이 있다면 댓글로 지적 부탁드립니다.(__ )
감사합니다.