didierfranc / v-touch

Bind HammerJS library with VueJS framework

vue-touch

Introduction

Vue-touch is the easiest way to use Hammer.js with the excellent Vue.js framework, it's essential to make decent mobile app. Compatible with Vue.js 1.x. This repo is perfect to understand the directive concept of VueJS, for a more comprehensive touch binding, Evan You updated the official just after I made this one : https://github.com/vuejs/vue-touch/

Usage

Vue-touch adds the v-touch:event directive to your vue instance. You can easily play with tap doubletap press swipe swiperight swipeleft and more.

Installation

Just add vue-touch.min.js to your project after vue.min.js. It includes a fresh version of Hammer.

<script src="lib/vue.min.js"></script>
<script src="lib/vue-touch.min.js"></script>

Example

<div id="app">
  <span v-touch:swipeleft="plus()" v-touch:swiperight="moins()" v-model="number">{{ number }}</span>
</div>

var app = new Vue({
  el: '#app',
  data : {
    number: 1
  },
  methods : {
    plus : function(){
      this.number++
    },
    moins : function(){
      this.number--
    }
  }
})

Thanks

Vue.js https://github.com/vuejs/vue
Hammer.js https://github.com/hammerjs/hammer.js

License

MIT

Copyright © 2016 Didier Franc