どうもみやです:)

今回もVue.jsでなんか作るぞプロジェクトの第2回です、前回書いた通り、プルリクを出すタイミングでこのブログで「こんなことやったよ〜」みたいなのを書いていきます

早速やっていくぞ！

タイトルロゴのコンポーネント化をしました

今回のプルリクはこちら Feature/logo by MH4GF · Pull Request #1 · MH4GF/CNR · GitHub

タイトルロゴのコンポーネントを作りました。と言ってもh1要素だけ！！ f:id:ata-ata:20181020111059p:plain

src/header/logo.vue

<template lang="pug">
  .logo
    h1 CNR
</template>

<script>
export default {

};
</script>

<style lang="scss" scoped>
  .logo {
    position: fixed;
    top: 40px;
    left: 40px;
    h1 {
      margin: 0;
    }
  }
</style>

本当にh1要素だけの簡単なコンポーネントですまた、余談ですが今回はHTMLテンプレートエンジンに pug を使ってみようと思っています。いつもRailsで書いているSlimみたいで書きやすそう！

コンポーネント

Vue.jsといえばコンポーネント思考(と思っているの)ですが、いまいち使い方を理解していなかったのでひとまず雑に使ってみようと思いました。

Vue.js公式のドキュメントによると、

コンポーネントは Vue.js の最も強力な機能の1つです。基本的な HTML 要素を拡張して再利用可能なコードのカプセル化を助けます。高度なレベルでは、コンポーネントは Vue.js のコンパイラが指定された振舞いをアタッチするカスタム要素です。場合によっては、特別な is 属性で拡張されたネイティブな HTML 要素の姿をとることもあります。コンポーネント - vue.js

ほーん？とにかくパーツを単一ファイルにひとまとめにして再利用可能にすると考えれば良さそうです

コンポーネント登録の流れ

それでは実際にコンポーネントを用意して使ってみます。

1. src/componentsディレクトリを用意し、その中に.vueファイルを作成する
今回はsrc/components/header/logo.vue に配置しました（上のやつ）

2. App.vueのscriptタグ内でインポートする

App.vue

<script>
import Logo from './components/header/Logo';  # インポート（.vueはいらない）

export default {
  name: 'App',
  components: {
    logo: Logo,  # コンポーネントを登録
  },
};
</script>

コンポーネント登録の方法はグローバル登録とローカル登録があり、これはローカル登録の方法です。App.vueのVueインスタンス内でのみコンポーネントの使用が可能になる。

3. App.vueのtempleteタグ内でコンポーネントを使用する

App.vue

<template>
  <div id="app">
    <header>
      <logo/>  # コンポーネントを配置
    </header>
    <router-view/>
  </div>
</template>

先ほど logo というコンポーネント名で登録したので、登録先であるApp.vueのtempleteタグ内では <logo /> というタグでコンポーネントを使用することができます。これでロゴが表示されるようになりました！！やった〜〜

おわり

今回はここまでですコンポーネントの用途として親子コンポーネント間でのデータの引き渡しがありますが、ロゴでは必要ないので必要になった際にまた勉強します。次回は早速本番デプロイしてみる予定です！早めのデプロイが大事:)

ここまで読んでくれてサンキュー！！

続き↓ ButterCMSの導入をしました m5gf.hatenablog.com

M5GF

まったり開発ブログ

タイトルロゴのコンポーネント化をした

タイトルロゴのコンポーネント化をしました

コンポーネント

コンポーネント登録の流れ

おわり