[ vue.js ] - Event & Input Data Binding

Event Modifiers

v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다.

index.html

<div id="vue-app">
      <h1>Event</h1>
      <button v-on:click.once="add">Add a Year</button>
      <button v-on:click="substract">Substract a Year</button>
      <p>My age is {{ age }}</p>
      <div id="canvas" v-on:mousemove="updateXY">{{ x }}, {{ y }}</div>
    </div>

app.js

new Vue({
  el: "#vue-app",
  data: {
    name: "Smooth",
    job: "developer",
    website: "https://velog.io/@smooth97/Vue.js",
    websiteTag: '<a href="https://velog.io/@smooth97/Vue.js">Blog</a>',
    age: 23,
    x: 0,
    y: 0
  },
  methods: {
    updateXY: function(event) {
      this.x = event.offsetX;
      this.y = event.offsetY;
    }
  }
});

Vue는 v-on 이벤트에 이벤트 수식어를 제공한다.

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<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>

Keyboard Event

키보드 이벤트를 청취할 때, 종종 공통 키 코드를 확인해야 한다. Vue는 키 이벤트를 수신할 때 v-on에 대한 키 수식어를 추가할 수 있다.

• .enter
• .tab
• .delete (“Delete” 와 “Backspace” 키 모두를 캡처합니다)
• .esc
• .space
• .up
• .down
• .left
• .right

index.html

<div id="vue-app">
      <h1>Keyboard Event</h1>
      <label>Name : </label>
      <input type="text" v-on:keyup="logName" />
      <label>Age : </label>
      <input type="text" v-on:keyup="logAge" />
    </div>

app.js

new Vue({
  methods: {
    logName: function() {
      console.log("logName");
    },
    logAge: function() {
      console.log("logAge");
    }
  }
});

input에 키보드 이벤트가 생길 때 마다 함수가 실행되서 console에 log가 된다.
React에서의 useState Hooks를 사용한 것과 비슷하게 사용하는 것 같다.

v-on:keyup.enter enter 이벤트를 추가해주고, 이벤트를 콘솔에 로그하는 함수를 작성하면

logName: function(e) {
      console.log(e.target.value);
    }

input의 결과값이 enter를 눌렀을 때 로그된다.

v-on:keyup.enter.alt 다른 이벤트를 추가로 적용시키면 enter + alt를 동시에 눌렀을 때 이벤트가 발생하도록 할 수 있다.

Input Data Binde

v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다. 입력 유형에 따라 엘리먼트를 업데이트 하는 올바른 방법을 자동으로 선택합니다. 약간 이상하지만 v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 “syntax sugar”이며 일부 경우에 특별한 주의를 해야합니다.

v-model은 모든 form 엘리먼트의 초기 value와 checked 그리고 selected 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다.

index.html

<div id="vue-app">
    <h1>Keyboard Event</h1>
    <label>Name : </label>
    <input type="text" v-model="name" />
    <span>{{name}}</span>
    <label>Age : </label>
    <input type="text" v-model="age" />
    <span>{{age}}</span>
  </div>

app.js

new Vue({
  el: "#vue-app",
  data: {
    name: "",
    age: ""
  }
 }

input에 keyboard 이벤트에 함수를 만들어서 name의 값을 전달하는 방식으로도 만들 수 있다.

index.html

<div id="vue-app">
    <h1>Keyboard Event</h1>
    <label>Name : </label>
    <input type="text" v-on:keyup.enter="logName" />
    <span>{{name}}</span>
    <label>Age : </label>
    <input type="text" v-on:keyup.enter="logAge" />
    <span>{{age}}</span>
  </div>

app.js

new Vue({
  el: "#vue-app",
  data: {
    name: "",
    age: ""
  },
  methods: {
    logName: function(e) {
      this.name = e.target.value;
    },
    logAge: function(e) {
      this.age = e.target.value;
    }
  }
});