[VueJS] Vue.js 기본

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가 편함

 

Vue2와 Vue3의 차이점

https://samsungsds.com/kr/insights/vue_js_3.html