Vue.js 이벤트 핸들링

<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>

<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>

<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>

<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>

<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>

<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>