vue이벤트 메서드- 첫번째

기술 서적 : VUE.JS 이정도는 알아야지 

책 정보 

http://book.naver.com/bookdb/book_detail.nhn?bid=12800811

vue 이벤트 메서드

v-on:[이벤트] = "자바스크립트 표현식"

v-on은 click, keyup, keydown,  input등 다양한 이벤트를 핸들링 할 수 있다.

밑에 예제1 소스는 클릭 할때 마다 증가 및 감소를 표현 하는 방법이다.

예제1

html

<div id="app">

<p> Counter : {{ counter }}</p>

<button v-on:click="counter +=1 "> +클릭 </button>

<button v-on:click="counter -=1"> -클릭</button>

</div>

script

<script>

new Vue({

el: '#app',

data:{

counter : 0

}

})

</script>

예제 2번 shuffle 메서드 처럼 for 안에서 매번 Vue.set을 호출하는 것은 비용이 크므로, this.messages와 동일한 값을 가지는 임시 배열을 선언후 임시배열을 섞고, 마지막에 this.messages에 대입하는 것이 훨씬 나은 성능을 보여준다.

예제2

html

<div id="app">

<button @click="shuffle">섞기</button>

<ul>

<li v-for="messages in messages">

{{ messages }}

</li>

</ul>

</div>

script

<script>

new Vue({

el: "#app",

data: {

messages : []

},

methods: {

shuffle : function() {

var temp = 0;

var i = 0;

var len = this.messages.length;

for( i; i < len; i += 1 ){

var randomIndex = Math.floor( Math.random() * ( i + 1));

temp = this.messages[ randomIndex ];

Vue.set( this.messages, randomIndex, this.messages[ i ]);

Vue.set( this.messages, i, temp );

}

}

},

mounted : function () {

var i = 0;

var len= 10;

for ( i; i < len; i += 1 ){

this.messages.push( '메세지' + i );

}

}

})

</script>

예제3

html

<div id="app">

<button @click="todayAlert">지금 시간은?</button>

</div>

script

<script>

new Vue({

el : "#app",

data : {

messages : []

},

methods : {

todayAlert : function () {

alert( new Date());

}

}

});

</script>

예제4

메서드에서 event 오브젝트를 받아 처리하는 것도 가능 하다.

html

<div id="app">

<div v-on:mousemove="trackingMouse" class="screen">

{{ mouse.x}}, {{ mouse.y }}

</div>

</div>

script

<script>

new Vue({

el : "#app",

data : {

mouse : {

x : 0,

y : 0

}

},

methods : {

trackingMouse: function( event ){

this.mouse.x = event.clientX;

this.mouse.y = event.clientY;

}

}

});

</script>