search
LoginSignup
33

More than 5 years have passed since last update.

posted at

updated at

Organization

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>'
}

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
33