• yundream
  • 2018-05-05 16:08:22
  • 2018-05-02 15:37:49
  • 80248

Contents

v-on

v-on 지시자(directive)로 DOM 이벤트를 듣고 Javascript를 실행 할 수 있다.

v-on:click

<div id="example-1">
	<button type="button" class="button" v-on:click="count += 1">{{ count }} 번째 클릭 입니다.</button>
</div>
<script>
new Vue({
  el: '#example-1',
  data: {
    count: 0
  }
})
</script>

이벤트 핸들러 로직은 복잡해지기 마련이라서, 일반적으로 v-on속성 값으로 메서드의 이름을 설정한다.
<div id="example-2">
	<button type="button" class="button" v-on:click="counter">{{ count }} 번째 클릭 입니다.</button>
</div>
<script>
new Vue({
  el: '#example-2',
  data: {
    count: 0
  },
  methods: {
    counter: function() {
      this.count += 1
    }
  }
})
</script>

메서드 이름을 바인딩하는 대신에 인라인 Javascript 구문을 사용 할 수도 있다.
<div id="example-3">
	<button type="button" class="button" v-on:click="say('hello')">Hello yundream</button>
	<button type="button" class="button" v-on:click="say('hi')">Hi yundream</button>
</div>
<script>
new Vue({
  el: '#example-3',
  methods: {
    say: function(name) {
        alert(name)
    }
  }
})
</script>

v-on을 이용한 간단한 계산기를 만들어봤다.
<div class="large-2 columns">
<div id="example-4">
    <input v-model="v1" type="number">
    <input v-model="v2" type="number">
    <input v-model="r1" type="number" readonly> 
    <span class="button" v-on:click="addValue">Add</span>
</div>
</div>
<script>
new Vue({
  el: '#example-4',
  data: {
    v1: 0, 
    v2: 0,
    r1: 0,
  },
  methods: {
    addValue: function() {
        this.r1 = parseInt(this.v1) + parseInt(this.v2)
    }
  }
})
</script>

Add

v-on:mouseover & mouseout

<div id = "example-10">
    <div v-bind:style = "mystyle" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
</div>
<script>
var vm = new Vue({
  el: "#example-10",
  data: {
      num1: 100,
      num2: 200,
      total : '',
      mystyle: {
        width:"100px",
        height:"100px",
        backgroundColor:"red",
      }
  },
  methods: {
    changebgcolor: function() {
      this.mystyle.backgroundColor = "green";
    },
    originalcolor: function() {
      this.mystyle.backgroundColor = "red";
    }
  }
})
</script>
v-bind 지시문은 엘리먼트의 속성을 설정하기 위해서 사용한다. stylesheet가 대표적인 속성이다. 위 예제는 "example-10" 앨리먼트에 마우스를 올리고 내릴때(떠날때) 백그라운드컬러를 변경한다.

v-on:keyup

마우스만으로 애플리케이션을 조작할 수는 없다.(마우스나 터치만으로 조작가능한 특성의 애플리케이션이 있기는 하지만 속도나 숙련도를 위해서는 키보드입력을 사용해야 하는 경우가 많다.) keyup으로 특정 키 입력을 이벤트를 기다릴 수 있다. 이 작업을 위해서는 숫자로 각 키를 정의한 key code를 알고 있어야 한다. 아래 Key code 표를 참고하자.

Ctrl+C를 입력하면 데이터 복사 메시지를 출력하는 프로그램이다.
<div id="example-11">
    <input v-on:keyup.ctrl.67="ctrl_c" v-model="idata">
</div>
<script>
new Vue({
  el: "#example-11",
  data: {
    idata: ""
  },
  methods: {
    ctrl_c: function() {
      alert("데이터 복사 : "+this.idata)
    }
  }
})
</script>

아래의 시스템 모디파이어 키들은 알고 있으면 도움이 되겠다. Vue 2.1.0 이상에서 사용 할 수 있다.
  • .ctrl
  • .alt
  • .shift
  • .meta