Vue.js를 클래스에서 사용할 때 설정

우선은 HTML이지만 쓰고 싶지 않으므로 Jade로 무례합니다.

index.jade

include ./elements

+html(lang="ja")
  +head
    title Test
  body

    #mario
      p Mario:
        button(@click="jump") Jump
      ul
        li(v-for="item in items" v-text="item.text")

    #luigi
      p Luigi:
        button(@click="jump") Jump
      ol
        li(v-for="item in items" v-text="item.text")

elements 가 포함되어 있지만 공통 부분을 외출하는 것만으로 특별한 일은하지 않습니다.+ 가 붙은 장소에서 호출하고 있습니다. # 는 div가 만들어지고 @ 는 Vue의 기법으로 on 를 의미합니다.

덧붙여서, elements 의 내용은↓.

elements.jade

mixin html
  doctype
  html&attributes(attributes)
    block

mixin head
  - var CDN = '//cdnjs.cloudflare.com/ajax/libs/'
  head
    meta(charset="utf-8")
    script(src=CDN + "vue/1.0.1/vue.min.js")
    script(src="main.js" charset="utf-8")
    block

계속해서 본제의 JS입니다만, Coffee라고 이런 느낌.
ES6로 써도 비슷한 것 같네요.

main.coffee

'use strict'

class Mario

  constructor: (@el)->
    @data =
      items: []

    new Vue({el: @el, data: @data, methods: @methods})

  methods:
    jump: (e)->
      obj =
        text: 'Jumped'
      @items.push(obj)
      return

document.addEventListener('DOMContentLoaded', ->
  new Mario('#mario')
  new Mario('#luigi')
  return
, false)

@ 는 Coffee 라고 this 라고 읽습니다.
그리고는 methods: 와 @data 를 필요에 따라서 추가해 가는 것만으로 사용할 수 있습니다.

결과

현장에서는 이상입니다.