사용자 입력 핸들링

 

사용자가 앱과 상호 작용할 수 있게 하기 위해 우리는 v-on 디렉티브를 사용하여 Vue인스턴스에 메소드를 
호출하는 이벤트 리스너를 첨부 할 수 있습니다.

HTML 부분
<div id="app-5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>

JS부분
var app5 = new Vue({
    el : "#app-5", 
    data : {
        message : "안녕하세요! Vue.js"
    },
    methods: {
        reverseMessage : function(){
            this.message = this.message.split('').reverse().join('')
        }
    }
})

이 메소드에서 우리는 단순히 DOM을 건드리지 않고 앱의 상태를 업데이트합니다.
모든 DOM조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춥니다.
Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model디렉티브를 제공합니다.

HTML 부분
<div id="app-6">
    <p>{{message}}</p>
    <input v-model="message">
</div>

JS부분
var app6 = new Vue({
    el: "#app-6",
    data : {
        message : "안녕하세요 Vue!"
    }
})