Vue 이벤트 핸들링과 폼 입력 바인딩

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

<div id="example-2">
  <!-- greet는 메소드 이름으로 아래에 정의 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 메소드는 methods 객체 안에 정의
  methods: {
    greet: function (event) {
      // 메소드 안에서 사용하는 this는 Vue 인스턴스를 가리킴
      alert('Hello ' + this.name + '!')
      // event는 네이티브 DOM 이벤트
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// JavaScript를 이용해서 메소드를 호출
example2.greet() // => 'Hello Vue.js!'

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 네이티브 이벤트에 액세스
    if (event) event.preventDefault()
    alert(message)
  }
}

<!-- 클릭 이벤트 전파 중지 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않음 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 체이닝이 가능함 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 수식어만 사용하면 에러 발생 -->
<form v-on:submit.prevent></form>

<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용하여, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 이곳에서 처리함 -->
<div v-on:click.capture="doThis">...</div>

<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리하며, 자식 엘리먼트에서는 실행되지 않음 -->
<div v-on:click.self="doThat">...</div>

<!-- 클릭 이벤트는 최대 한번만 트리거됨 -->
<a v-on:click.once="doThis"></a>

<!-- 스크롤의 기본 이벤트를 취소할 수 없음 -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- key가 Enter일 때만 vm.submit()을 호출 -->
<input v-on:keyup.enter="submit">

<input v-on:keyup.page-down="onPageDown">

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

<!-- Alt 또는 Shift와 함께 눌린 경우에도 실행 -->
<button @click.ctrl="onClick">A</button>

<!-- Ctrl 키만 눌려있을 때만 실행 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 시스템 키가 눌리지 않은 상태인 경우에만 작동 -->
<button @click.exact="onClick">A</button>

<input v-model="message" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>

<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre-line">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="여러줄을 입력해보세요"></textarea>

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>체크한 이름: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>선택: {{ picked }}</span>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>선택함: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

<!-- picked는 선택시 문자열 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- toggle은 true 또는 false -->
<input type="checkbox" v-model="toggle">

<!-- selected는 "ABC" 선택시 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// 체크된 경우
vm.toggle === 'yes'
// 체크 되지 않은 경우
vm.toggle === 'no'

<input type="radio" v-model="pick" v-bind:value="a">

// 체크 시
vm.pick === vm.a

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 선택 시
typeof vm.selected // -> 'object'
vm.selected.number // -> 123

<!-- "input" 대신 "change" 이후에 동기화 -->
<input v-model.lazy="msg" >

<input v-model.number="age" type="number">

<input v-model.trim="msg">