#42 Vue.jsアウトプット

こんにちは、hiroです😀
今日はフフッてなった記事を見ました。
携帯番号で ”090” を使っている人は ”おじさん” らしいです。。。

要は携帯を契約してから20年以上経過している携帯番号の多くが ”090” を使っているとの事です🙄

わたくし、絶賛おじさん認定になります。
ちなみに契約して18年になります。笑
契約して20年以下の場合も ”090” を取り扱う場合があるため、記事読んでる人の中で ”090” 使われてる人がいても気にしないで下さい。笑

それでは本日もアウトプットさせて頂きます😀

グローバルコンポーネント登録

//LikeNumber.vue//
<template>
  <div>
    <p>いいね({{number}})</p>
    <button @click="increment">+1</button> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      number: 5
    };
  },
  methods: {
    increment() {
      this.number += 1;
    }
  }
};
</script>



//main.js//
import Vue from 'vue'
import App from './App.vue'
import LikeNumber from './LikeNumber.vue';

Vue.config.productionTip = false;
Vue.component('LikeNumber', LikeNumber);

new Vue({
  render: h => h(App)
}).$mount('#app');



//App.vue//
<template>
  <div>
    <LikeNumber></LikeNumber>
  </div>
</template>

Vue.component(第一引数[コンポーネント名]', 第二引数[テンプレート内容]);

・グローバル登録するには、 "Vue.component" を記述する。
・上記記述は "Vueインスタンスの前" に定義する。
・DOMテンプレートでコンポーネントを使う場合、コンポーネント名は "ケバブケース" で記述する。
・"DOMテンプレート" とは、".htmlファイルに記載されるhtmlテンプレート" のこと。DOMテンプレートの場合、"大文字・小文字をブラウザは区別しない" ため、パスカルケースで記述をすると、全て小文字として解釈される。

import コンポーネント名 from 'ファイル格納場所';

・LikeNumber.vueファイルに記述した処理を、main.jsファイルの3行目の様に記述する事でLikeNumber.vue処理を使用する事ができる。

<コンポーネント名></コンポーネント名>

・App.vueファイル3行目の様に記述する事で表示される。

次回は "ローカルコンポーネント登録" についてアウトプットしていきたいと思います。

本日も最後まで読んで頂きありがとうございました！

※本日時点で学習した内容を備忘目的で投稿しております。各項目を全て網羅している内容では無いため、「駆け出しが張り切ってアウトプットしてるな〜」程度で温かい目で読んで頂けると幸いです😇


■参考教材
Udemy　超Vue.js2　完全パック