Vue.jsの$elに指定するDOMのルール、Componentの使いドコロ

概要

Vueコンストラクタに指定するelオプション にいろいろ指定していて気づいたことのメモ。

環境

Rails+Webpack+Gulp+Vue+Coffeescript

メモ

基本

elオプション には、id、もしくはひとつしかないclassを指定しないといけない。

# good
id = new Vue(
  el: '#id'
  data: {
    text: 'はろう'
  }
)

# good
button_send = new Vue(
  el: '.button--send' # ひとつしか存在しないクラス
  data: {
    text: 'はろう'
  }
)

# bad（というか動かない）
button = new Vue(
  el: '.button' # 複数存在するクラス
  data: {
    text: 'はろう'
  }
)

Componentを使いまわす

では、複数要素に使いまわすにはどうするか。
→同じviewmodel内でのcomponentの使い回しは可能。

id = new Vue(
  el: '#id'
  data: {
    text: 'はろう'
  }
  components: {
    'my-component': {
      template: '<span>{{text}}</span>'
    }
  }
)

DOMはこちら。

<div id="id">
  <div v-component="my-component" v-with="text: text"></div>
  <div v-component="my-component" v-with="text: text"></div>
  <div v-component="my-component" v-with="text: text"></div>
</div>

Componentを別ファイルにする

componentを別ファイルに分けて、Webpackでrequireすればcomponentは1ファイルで使いまわせる。

id = new Vue(
  el: '#id'
  data: {
    text: 'はろう'
  }
  components: {
    'my-component': require('my-component')
  }
)

some_id = new Vue(
  el: '#some_id'
  data: {
    text: 'こんにちは'
  }
  components: {
    'my-component': require('my-component')
  }
)

my-component.coffee

# このファイルを使い回せばOK
module.exports = {
  template: '<span>{{text}}</span>'
}

参考

• The Vue Constructor - vue.js