はじめに
今回は、Vue.jsについて学んだことをメモ📝感覚で記録していきます。
内容は、初歩的な内容かと思います。
コンポーネント
- Vueアプリケーションの画面を構成する部品のこと
- 機能ごとにTHML,CSS,JS全てをひとまとめにして扱う
- いくつか組み合わせて画面を作る
- また、コンポーネントの中に更にコンポーネントを配置する事もある
- 一番外側にあるコンポーネントを ルートコンポーネント という
コンポーネントを使うメリット
- 再利用しやすく効率的に開発できる
- バグの影響範囲が見つけやすい
- 健康があった時にまとめて修正できる
Vueプロジェクト
index.html↓
最終的にブラウザに表示されるファイル
idが'app'のdivタグとmain.jsを読み込むscriptタグが書いてある。
main.js↓
Vueアプリケーションの初期化などを行う。
エントリーポイントとして機能するファイル。
main.jsの中身
- inport分と関数が書いてある
- VueモジュールからcreateApp関数のインポート
createApp
- Vueインスタンスを生成する関数,
- そして生成する時は、ルートコンポーネントを指定する、(今回は、Appを指定)
- 更に生成したVueインスタンスを id='app'の要素にマウント
index.htmlのid='appのdiv要素に'Vue
- App.vueからから,Appコンポーネントをインポート
App.vueの中身
- Vueアプリカージョンのルートコンポーネント
- 他のコンポーネントを含み、アプリケーション全体のレイアウトなどを決める
- Vueファイルは、下の３つに分けることができる
| script部分(Javascript):使用するコンポーネントをインポートしている
| template部分(HTML):画面の内容を書いている
| style部分(CSS):見た目を指定する
その他のファイル↓
app/src/components
コンポーネントのVueファイルが入っている
app/src/assets
画像やCSSファイルなどが入っている
文字を表示してみる
Top画面に文字を表示してみる。
TestComponent.vueを作成して文字を表示させてみる。
$ touch app/src/components/TestComponent.vue
<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 タグの中身が表示されているはず!!
親からコンポーネントにデータを渡す
親から子にデータを渡すには、 Props を使う。
今回だとApp.vue -> TestComponent.vue
子側(TestComponent)
defineProps関数を使用し受け取るpropsの型と名前を定義
表示する時には、 {{名前}} と書く
親側(App.vue)
コンポーネントのタグの属性として渡したい値を書く
TestComponent.vueの中にscriptタグを追加して、
その中に下のように書いてみる。
注意で script タグに setup と書く必要があります。
text という名前のpropsを文字列型で定義する。という意味
difuneProps関数では、このように
オブジェクトでpropsを定義する。
<script setup>
defineProps({
text: String,
})
</script>
HTML部分の文章を {{ text }} に変更する
<template>
<p>{{ text }}</p>
</template>
最後にApp.vueを編集する
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<TestComponent text="Propsを試してみた!"/> <!-- ここを編集 -->
</template>
確認をすると変わっているのがわかります。
これで、親コンポーネントで指定した文章を
子コンポーネントで受け取って表示させることができました。
これが基本的なコンポーネントの作り方です。
最後に
僕は、まだ未経験エンジニアでここから学んだことを随時小さいことでも Qiita に書いて発信していけたらなと思ってます。温かい目で見て仲良くして下さい
Twitter @MeePooz9