蚊帳の中の日記

ゆるく生きてます

Vueチュートリアル 3日目

javascript vue.js

https://jp.vuejs.org/v2/guide/components-registration.html

  • コンポネントの登録
  • 復習：コンポネントは名前付きで再利用可能なvueインスタンス
  • そのままVue.component({...})とかするとグローバルなインスタンスの登録になる。しかし、グローバルだとwebpackなどのバンドラーみたいな機能を使っている時に使わない場面で余計にインスタンスを読み込んじゃうみたいなことが起きるのでよろしくない。
  • グローバルではなくローカル登録を心掛ける。こんな感じ
  • ちなみにcomponentの命名はキャメルケースでも、パスカルケースでもどちらでもいいけど、パスカルケースで書くと、実際にcomponentを使うときキャメルとパスカルどちらでも使えるようになる。まあ迷うから基本的にキャメルケースに統一したほうが良いと思うけど。
  • ローカル登録されたコンポーネントは、他のサブコンポーネント内で使用できない。。。らしい。
var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}
  • モジュールシステムもある（小並感）。

https://jp.vuejs.org/v2/guide/components-props.html

  • propsはキャメルケースで書いて、実際に使用するときはケバブケース。
Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>
  • prop validation 超便利そう。defaultとかrequiredとか型バリデーションとかカスタムバリデーターみたいなのとか。
  • passing static <sample title='hoge'></sample>
  • dynamic props <sample v-bind:title='post.title'></sample> もしくは<sample v-bind:title="post.title + 'by' + post.author.name"></sample>。こんな感じで文字列連結みたいにもかける。
  • one-way data flowの英語がよくわからない、、、？？
  • prop validationは、componentインスタンスを作る前にバリデーションをする。そのため、dataとかcomputedみたいなインスタンスオプション内ではdefaultとvalidator関数は使えないことを覚えておこう。
  • Non-Prop Attributesの節はメリットが良くわからなかった。和訳も上手くできなかった。また読み返す。

https://jp.vuejs.org/v2/guide/components-custom-events.html

やっとcomponentとかが使い方わかってきた気がする。 簡単なTODOアプリを作成しながら学んでいる最中。これをfirebaseとか連携すればちょっとしたTODOアプリは実使用できそうだけど、いかんせんfirebaseがまだわかってないのでそっちも勉強してみる所存。 PracticeVue/test/todo at master · kayawari/PracticeVue · GitHub