- 웹 인터페이스를 구축하기 위한 진보적인 JavaScript 프레임워크라 한다
- SPA (Single Page Application), 간단한 웹을 만들때 주로 사용된다고 한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
<script src="app.js"></script>
</body>
</html>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('');
}
}
});
- 기본적으로 HTML로 UI를 구성하고 JavaScript로 기능을 구현할 수 있다
- Vue 인스턴스를 생성하여, el 속성으로 DOM 요소를 지정, data 속성엔 필요한 DOM에 사용할 데이터들을, methods에선 필요한 함수들을 명시할 수 있다