[ITSkeleton][vue.js] 클릭 및 키 입력 이벤트 (click)

이전글 : [ITSkeleton][vue.js] v-for(열거)를 사용해봅시다 , 바인딩

[ITSkeleton][vue.js] v-for(열거)를 사용해봅시다 , 바인딩

v-on:click

시작하기에 앞서 v-on:click은 @click으로도 표현이 가능합니다

 

먼저 간단하게 클릭 이벤트를 만들어 봅시다

<div id="app">
  <button v-on:click="test">
    testButtom
  </button>
</div>

new Vue({
	el: '#app',
  methods: {
  	test() {
    	alert('테스트!');
    },
  },
})

이렇게 간단하게 클릭을 만들어 보았습니다. 크게 생각할만한 것은 없죠?

 

클릭 이벤트는 꼭 버튼에서만 동작하는 것은 아닙니다 그건 아시죠?

예를 들어보자면

<div id="app">
  <button v-on:click="test">
    testButtom
  </button>
  <div @click="test">
    div클릭
  </div>
</div>

버튼 아래의 div 처럼 저렇게 만들어서 클릭 이벤트를 적용할 수 있다는점! 그냥 알고만 넘어가세요!

양방향 데이터 바인딩

데이터가 변경되는것을 최신값으로 반영하게 하고싶을때 몇가지 핸들러를 통하여 작업이 가능합니다

 

코드를 통해서 알아볼까요

<div id="app">
  <button v-on:click="test">
    testButtom
  </button>
  <input v-model="testModel"/>
</div>

new Vue({
	el: '#app',
  methods: {
  	test() {
    	this.testModel += 'byebye';
    },
  },
  data: {
  	testModel: 'hihi'
  },
})

천천히 살펴보면 이게 어떻게 동작하는지 알 수 있겠죠? 새로고침 같은것 필요없이 데이터를 변경할 수 있습니다.

 

다음은 필터를 사용하는 방법을 알아보도록 하겠습니다 vue.filter