Vue??
Vue는 프론트엔트에서 편리하게 사용자 인터페이스를 만들 수 있게 도와주는 프레임 워크입니다.
Vue 사용하는 방법
처음 Vue를 사용하신다면 간단하게
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
스크립트를 추가하여 사용할 수 있습니다.
기본적인 형태는 다음과 같습니다.
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el : '#app',
data:{
message:'hello'
},
methods : {
},
created: function(){
}
});
</script>
</body>
여기서 new Vue가 vue의 기본적인 함입니다.
이 인스턴에는 다양한 옵션들이 들어 있습니다.
현재 el 옵션은 div태그의 id = 'app'을 받아서 사용하겠다 라는 의미입니다.
따라서 var vm 에서 vm 음 id='app' 인 div 태그 아래에서만 작동합니다.
위에 작성된 Vue 코드들을 실행하면 다음과 같습니다.
Vue 함수의 data의 message를
div 태그의 {{ message }} 에 바인딩 되어 출력됩니다.
이를 Vue에서는 데이터바인딩 이라고 부릅니다.
만약 message의 값을 'hi' 로 바꾼다면
<script>
var vm = new Vue({
el : '#app',
data:{
message:'hi'
},
methods : {
},
created: function(){
}
});
</script>
hi로 출력되는것을 보실 수 있습니다.
