Vue 사용자 입력 핸들링

v-on

• 사용자와 앱을 상호 작용할 수 있게 해주는 디렉티브
• Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가할 수 있음

기본 문법

<button v-on:Event="methodName"></button>
<button @Event="methodName"></button>	// v-on: => @ 대체가능

사용법

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
      // output : !sj.euV olleH
    }
  }
})

v-model

• v-text, v-html등은 모두 단방향 디렉티브이지만
  v-model은 input 입력과 앱 상태를 양방향으로 바인딩 해주는 양방향 디렉티브

기본 문법

<input v-model="변수명">

사용법

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

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})