[vue.js 기초] 뷰에서의 데이터 바인딩 / 이벤트 처리하기

Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수있는 HTML 기반 템플릿 구문을 사용한다.

뷰에서의 템플릿 문법은 데이터 바인딩과 디렉티브로 나뉜다.

데이터 바인딩

new Vue({
  data: {
    message: '안녕하세요'
  }
})

<div>{{ message }}</div>

디렉티브

디렉티브는 v-접두사를 사용하는 속성들을 말한다.

• v-for
• v-if
• v-bind
• v-on
• v-model

new Vue({
  data: {
    items: ['red', 'blue', 'green']
  }
})

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

v-bind

• 이미지 데이터 연결 : v-bind:src
• 링크를 통한 연결 : v-bind:href
• 스타일시트 연결 : v-bind:class, v-bind:style
• 키를 통한 연결 : v-bind:key

    new Vue({
        el: '#app',
        data: {
            name: 'naver',
            url: 'https://www.naver.com/',
        },
    });

<div id="app">
    <a v-bind:href="url" v-text="name"></a><br>
</div>

v-on

v-on은 일종의 이벤트 리스너 역할을 한다.

 

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p>
</div>

 

더 복잡한 함수 이벤트를 핸들링하기 위해서는 뷰 인스턴스에 method에 함수를 정의해서 사용하면 된다.

 

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

이벤트 수식어

v-on을 통한 이벤트 핸들링을 용이하게 하기 위한 다양한 이벤트, 키, 시스템 수식어가 존재한다.

 

예를들어 v-on:click.prevent.self를 사용하면 모든 클릭을 막을 수 있다.

 

또 <div @click.ctrl="doSomething">Do something</div> 다음과 같이 이벤트 수식어를 작성하면 컨트롤 키를 누른 채 클릭할 때만 이벤트를 발생시킬 수 있다. 이벤트 수식어에 대한 예를 모두 설명할 수는 없으므로 필요할 때 공식문서에서 참조하자.

이벤트 핸들링 — Vue.js