Vue.js란?
사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 Progressive Framework.
특징
- Approachable (접근성)
- Versatile (유연성)
- Performant (고성능)
MVVM Pattern
Model(자바스크립트 객체) + View(웹페이지의 DOM) + ViewModel(Vue)
기존에는 자바스크립트로 view(DOM)에 접근하거나 수정하기 위해 jQuery와 같은 라이브러리를 이용하였다.
<p id="p1">예시 텍스트</p>
<button>클릭</button>$('button').click(function () {
$('#p1').text('대체 텍스트');
});Vue는 view와 Model을 연결하고 자동으로 바인딩하여 양방향 통신을 가능하게 하였다.
<div id="app">
<p id="p1">{{msg}}</p>
<button @click="changeMsg">클릭</button>
</div>new Vue({
el: "#app",
data() {
return {
msg: "기본 텍스트",
};
},
methods: {
changeMsg() {
this.msg = "대체 텍스트"
}
}
});적절한 예시가 아닌 것 같지만.. 아무튼 vue가 편함
