こんにちは、hiroです😃
昨日、人生初のギックリ腰っぽいのを体験しました。笑
運動不足だったため、ハンドクラップと他の有酸素運動のYouTube動画を流しながら、ストレッチ無しで運動（原因絶対これ）しました。運動後のシャワー中に床に置いてるシャンプーに手を伸ばした時に「ピキッ！」と来ました。。。悶絶。動けない。足に力が入らない様になりその場で数分間硬直しました。恥ずかしい。。。

昨日は膝に手をつかないと歩けなかったのですが、本日手の補助無しで歩ける様になりました🙄処置をして安静にしておけば、1日〜2日程度で痛みが引いてくる見たいです。歩けるって素晴らしい！

ちなみに今回の様な急性的な痛みはひょうのうで "冷やす" 、神経痛などの慢性的な痛みは "温める" と効果があるみたいです。痛みの状態によって処置を変えないと逆効果になるので、ギックリ腰になられた方は十分ご注意下さいね😃

本題それましたが、本日もアウトプットしていきます！

コンポーネント

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <my-component></my-component> 
</div>

//JavaScript//
Vue.component('my-component', {
  data: function() {
    return {
   	  number: 12
    }
  },
  template: '<p>いいね({{number}})</p>'
})

new Vue ({
  el: '#app',
})

・コンポーネントとは "部品" を表す。
・コンポーネントは "名前付きの再利用可能なVueインスタンス" の事。

Vue.component(第一引数[コンポーネント名], 第二引数[オブジェクト])

・JavaScript1行目に、componentが使用出来る様に記述する。
・JavaScript2行目のdataは、 "値" ではなく "関数" を記述する。このルールを適用しないと、例えばコンポーネントでボタンを3つ作成して1つのボタンをクリックをすると、3つのボタンにクリックした時の処理が反映されてしまう。dataに関数を設ける事で、1つのボタンをクリックしてもクリックボタンだけに処理が実行される様になる。
・値は "return" を記述して返す。

template: 'HTMLに表示させたい内容を記述'

・JavaScript7行目を参照。

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

・JavaScript1行目の第一引数で指定したコンポーネント名をタグで囲う。
・JavaScript1〜8行目に記述した内容がHTML上に表示されるようになる。

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

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

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