Vue.js でのimport HogeComponent from 'hoge-component'は<template>で<hoge-component>と書ける

はじめに

Vue.jsのアッパーキャメルケースからケバブケースへの変換をわざわざ手入力でしていましが、それをしなくとも自動的にVue.jsがしてくれることに気づいたのでそれについて記入。

環境

利用しているモジュールとバージョンについてです。

  • Vue.js: 2.5.17
  • parcel-bundler: 1.9.7

概要

インポートでimport HogeComponent from './HogeComponent.vue';と書いたときに、 コンポーネントで以下のように書かなくても、

components: {
  'HogeComponent': HogeComponent
}

以下のように書いても動きます。
HogeApp.vue

<template>
  <HogeComponent></HogeComponent>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeApp',
  components: {
    HogeComponent
  }
}
</script>

びっくりです。

ちなみにpropsでも

v-bindでデータを渡すときにHogeComponent.vueのpropsでfooBar: Stringと定義しておいても :foo-bar="ok"で渡して問題ないようです。

HogeApp.vue

<template>
  <HogeComponent
      :foo-bar="'ok'">
  </HogeComponent>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeApp',
  components: {
    HogeComponent
  }
}
</script>

HogeComponent.vue

<template>
  <div>{{ fooBar }}</div>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeComponent',
  props: {
    fooBar: String
  }
}
</script>

以下のように、HogeComponent.vueのpropsで'baz-qux': Stringと定義したときは、
同vueファイル内の<template>では<div>{{ bazQux }}</div>と書けるようです。

HogeApp.vue

<template>
  <HogeComponent
      :baz-qux="'ok'">
  </HogeComponent>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeApp',
  components: {
    HogeComponent
  }
}
</script>

HogeComponent.vue

<template>
  <div>{{ bazQux }}</div>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeComponent',
  props: {
    'baz-qux': String
  }
}
</script>

しかし、以下のコードは動きません。 HogeApp.vue

<template>
  <HogeComponent
      :bazQux="'ok'">
  </HogeComponent>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeApp',
  components: {
    HogeComponent
  }
}
</script>

HogeComponent.vue

<template>
  <div>{{ bazQux }}</div>
</template>

<script>
import HogeComponent from './HogeComponent.vue';

export default {
  name: 'HogeComponent',
  props: {
    bazQux: String
  }
}
</script>

問題

原因としてはhtmlの命名規則らしいです。以下の記事が参考になります。

まとめ

htmlタグを書くときは、ケバブケースで記入する。
まとめを書いてるときに以下の記事を見つけました。自分の記事の上位互換な気がしてやまないです。

Windows8.1でgccを動かすメモ｜MinGW-W64を利用

Windows

windowsでgccが使いたくなったのでその時の導入メモ

環境

  • OS: Windows8.1 Pro

入れるもの

MinGW-W64

install

ここからDLする。 そしてinstallerに従いinstall。

パスを通す

  1. windowsキーを押す。
  2. システム環境変数の編集を入力する。
  3. システム環境変数の編集を開く。
  4. 詳細設定の環境変数をクリック
  5. システム環境変数のPATHを探す。
  6. PATHをクリックして編集する。
  7. 変数値の末尾に以下を記入する。(ここはバージョンによって違くなるかも)
;C:\Program Files\mingw-w64\x86_64-8.1.0-posix-seh-rt_v6-rev0\mingw64\bin

開いたwindowを閉じる

  1. OKを押す。
  2. OKを押す。
  3. OKか適用を押して閉じる。

確認

gcc --versionを入力して確認する。

usermei MINGW64 ~/dokokano/foruda (master)
$ gcc --version
gcc.exe (x86_64-posix-seh-rev0, Built by MinGW-W64 project) 8.1.0
Copyright (C) 2018 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO

OK！

cliからパスをzshrcに追加

Thx tcpdump

どうやるのか疑問に思ってたけど解決できた。
tcpdumpをhomebrewで入れたときに、丁寧に説明してくれたおかげ。
ありがとうございます！

echo 'export PATH="/usr/local/opt/libpcap/bin:$PATH"' >> ~/.zshrc

こんな感じで書いてねとinstallしたときに書かれてありました。この1行を入力すると.zshrcの一番下の行にechoで書いた文字列が挿入された！

>>

これなーにって気がするけど、これは一番下の行に文字列を追加するものらしい。

~/development
❯ touch test.txt

~/development
❯ echo 'hoge' >> test.txt

~/development
❯ echo 'hogefugaemon' >> test.txt

で、test.txtを見ると、ちゃんとhogefugaemonっていう文字列が一番下に入る。

疑問

echoと>>で、cliからパスを追加できるようになったけど、sourceコマンドを入力する必要があるのかは不明。やったの方がいいのだろうか？