WIP

.vueによるcomponent作成

created at 2017.02.14
updated at 9ヶ月前 ago
vsanna / public vue.js

vue componentの開発において、Vue.extendを呼び出す方法と、hoge.vueという拡張子を利用する方法がある

比較

.vueにcomponentの実装をまとめない方法

これはこれで気楽に書けるので便利。

特にinline-templateはズボラに書くにはすごく気楽だったが、基本はNGとのこと

Railsがレンダリングしたhtmlをtemplateに渡すにはslotを使うかtemplateを活用するのかなとふわふわ考えている

// componentのファイル
// Vue.extendでcomponent実装
var HogeComp = Vue.extend({
  template: '#templateId', // inline-template使
  data: {},
  methods: {},
  created: {},
  events: {}
  // などなど ...
})
export default HogeComp

// rootを定義しているファイル
import HogeComp from './hoge_comp.js'

new Vue({
  el: '#app',
  components: {
    'hoge': HogeComp
  },
  // data, created, method, etc...
})

.vueを利用する形式

  • exportするのはただのオブジェクトでOK. 後述のvue-loaderがきっとうまくやってくれているのだろう
// hoge.vue

<template> // srcで読み込んでもいい
  <p>{{ hello }}</p>
  <OtherComponent> // 他コンポーネントを入れ子にもってもOK. ここではCamelCaseでかいてもOK
    {{ hogehoge }}
  </OtherComponent>
</template>

<style scoped> // srcでよみこんでもいい。lang="sass" をつければsassもつかえる
  p { color: red; }
</style>

<script>
export default {
  data: {},
  components: {}, // 入れ子OK
  methods: {},
  events: {},
  created: {},
  computed: {},
  watch: {}, // その他にも。
}
</script>

vue-loader

  • webpackのloaderの一つ
  • loader ... webpackが取り扱えるデータの種別を追加するライブラリの種類
  • .vueの拡張子を受け付けられるようにする
$ npm install -S vue-loader
# 入れると他にもこれいれろやみたいなメッセージがでる(こともある)のでソレに従う

shareシェアする

forumコメント

まだコメントはありません!
ログインしてコメントを残す
{{comment.user.name}} on {{commentCreatedAt()}}

content_copy前後のイシュー

{{message}}