初学者のVue.js

# はじめに
今回は、Vue.jsについて学んだことをメモ📝感覚で記録していきます。
内容は、初歩的な内容かと思います。

- - -

## コンポーネント
* Vueアプリケーションの画面を構成する部品のこと
* 機能ごとにTHML,CSS,JS全てをひとまとめにして扱う
* いくつか組み合わせて画面を作る
* また、コンポーネントの中に更にコンポーネントを配置する事もある
* 一番外側にあるコンポーネントを *ルートコンポーネント* という

<details open><summary>コンポーネントを使うメリット:point_up:</summary>

* 再利用しやすく効率的に開発できる
* バグの影響範囲が見つけやすい
* 健康があった時にまとめて修正できる

</details>

- - -
## Vueプロジェクト
#### index.html↓
最終的にブラウザに表示されるファイル
idが'app'のdivタグとmain.jsを読み込むscriptタグが書いてある。
#### main.js↓
Vueアプリケーションの初期化などを行う。
エントリーポイントとして機能するファイル。

<details open><summary>main.jsの中身:point_up:</summary>

* inport分と関数が書いてある
* VueモジュールからcreateApp関数のインポート

<details open><summary>createApp:point_up:</summary>

* Vueインスタンスを生成する関数,
* そして生成する時は、ルートコンポーネントを指定する、(今回は、Appを指定)
* 更に生成したVueインスタンスを id='app'の要素にマウント
index.htmlのid='appのdiv要素に'Vue

</details>

* App.vueからから,Appコンポーネントをインポート
[![Image from Gyazo](https://i.gyazo.com/c39b7faf4327d6161c5673e9a91cf47e.png)](https://gyazo.com/c39b7faf4327d6161c5673e9a91cf47e)

</details>

<details open><summary>App.vueの中身:point_up:</summary>

* Vueアプリカージョンのルートコンポーネント
* 他のコンポーネントを含み、アプリケーション全体のレイアウトなどを決める
* Vueファイルは、下の３つに分けることができる
| script部分(Javascript):使用するコンポーネントをインポートしている
| template部分(HTML):画面の内容を書いている
| style部分(CSS):見た目を指定する

</details>

#### その他のファイル↓

###### app/src/components
 コンポーネントのVueファイルが入っている
###### app/src/assets
 画像やCSSファイルなどが入っている


# 文字を表示してみる
Top画面に文字を表示してみる。
TestComponent.vueを作成して文字を表示させてみる。
```bash:bash
$ touch app/src/components/TestComponent.vue
```
```vim:vim
<template>
  <p>テストコンポーネントです！</p>
</template>
```
ここまでできたら、app/src/App.vueを編集する
```
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <TestComponent /> <!-- ここに追加 :今回は、画面の下に文字を表示させる -->
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import TestComponent from './components/TestComponent.vue';<!-- 追加 -->

export default {
  name: 'App',
  components: {
    HelloWorld,
    TestComponent,<!-- 追加 -->
  }
}
</script>
```
これで **http://localhost:8080/** を確認してみたら下の方に,
TestComponent.vueで追加した *p* タグの中身が表示されているはず!!
[![Image from Gyazo](https://i.gyazo.com/3c3dc6946ad377ef5afb9a74612affc7.png)](https://gyazo.com/3c3dc6946ad377ef5afb9a74612affc7)


## 親からコンポーネントにデータを渡す
親から子にデータを渡すには、 ***Props*** を使う。
今回だとApp.vue -> TestComponent.vue

<details open><summary>子側(TestComponent):point_up:</summary>

defineProps関数を使用し受け取るpropsの型と名前を定義
表示する時には、 *{{名前}}* と書く

</details>

<details open><summary>親側(App.vue):point_up:</summary>

コンポーネントのタグの属性として渡したい値を書く

</details>

----------

TestComponent.vueの中にscriptタグを追加して、
その中に下のように書いてみる。
注意で *script* タグに *setup* と書く必要があります。

:::note info
 **text** という名前のpropsを文字列型で定義する。という意味
:::

difuneProps関数では、このように
オブジェクトでpropsを定義する。

```vue:TestComponent.vue
<script setup>
defineProps({
  text: String,
})
</script>
```
HTML部分の文章を **{{ text }}** に変更する
```vue:TestComponent.vue
<template>
  <p>{{ text }}</p>
</template>
```
最後にApp.vueを編集する
```vue:App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <TestComponent text="Propsを試してみた!"/> <!-- ここを編集 -->
</template>
```
確認をすると変わっているのがわかります。
これで、親コンポーネントで指定した文章を
子コンポーネントで受け取って表示させることができました。
これが基本的なコンポーネントの作り方です。
[![Image from Gyazo](https://i.gyazo.com/db6c4c17fd6aa30cf4b96c2926b4e7c2.png)](https://gyazo.com/db6c4c17fd6aa30cf4b96c2926b4e7c2)


-------------




# 最後に
僕は、まだ未経験エンジニアでここから学んだことを随時小さいことでも *Qiita* に書いて発信していけたらなと思ってます。温かい目で見て仲良くして下さい:relaxed::v:
Twitter　***@MeePooz9***