Vue.js 3 学習記録 チュートリアル編

Vue.jsの概要学習　

https://www.youtube.com/watch?v=wlCwyouRbtE&t=157s
倍速で概要を確認した

公式HPで学習

はじめに

Vue.jsの特徴 要点まとめ

​* 単一ファイルコンポーネント 一個のファイルでまとめて見た目、ロジック、スタイルを定義できる
HTML に似たファイル形式の Vue コンポーネント (*.vue ファイルとしても知られ、「SFC」と略されます)。
SFC は、その名前が示す通り、コンポーネントのロジック (JavaScript)、テンプレート (HTML)、およびスタイル (CSS) を単一のファイルに収めたもの

vueはHTMLの書き方とSFCの書き方がある

• 2 つの API スタイル​
  Vue コンポーネントを作成する際は、Options API、そして Composition API と呼ばれる 2 種類
  Composition APIの方が楽にかける

Options API​
Options API では、data、methods、mounted といった数々のオプションからなる 1 つのオブジェクトを用いてコンポーネントのロジックを定義。定義されたプロパティには、コンポーネントのインスタンスを指す this を使って、関数内からアクセス

Composition API​
Composition API では、インポートした各種 API 関数を使ってコンポーネントのロジックを定義していきます。SFC において、Composition API は通常、<script setup>と組み合わせて使用し。setup という属性を付けることで、Vue にコンパイル時の変形操作を実行してほしいというヒントが伝えられます。これにより、定型的な書式の少ない Composition API を利用することができます。たとえば、<script setup>のなかで宣言したインポート、トップレベルの変数、トップレベルの関数は、テンプレート内で直接使うことができます。

チュートリアルで学習

CompositionとSFCの形態で学習
https://ja.vuejs.org/tutorial/#step-1

宣言的レンダリング

reactive() API 通常のオブジェクト
ref() API　任意の値の型

属性バインディング

<h1 v-bind:class="titleClass">{{titleClass}}</h1>
{{}} テキスト補間
v-bind:idはhtmlのid要素に割り当てる
v-bind:classはstyleの割り当て

イベントリスナー

v-on ディレクティブを使うことで script内で宣言した関数を割り当てることができる

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <!-- make this button work -->
  <button v-on:click="increment">count is: {{ count }}</button>
</template>

フォームバインディング

input要素やラジオボタンに使えるやつ、v-model

条件付きレンダリング

if文 v-if,v-else

リストレンダリング

v-for

算出プロパティー

computed()
他のリアクティブなデータに基づいて .value を計算する算出 ref を作ることができる

ライフサイクルとテンプレート参照

react hooksみたいな感じでレンダリング、マウントのタイミング重要、後で苦労しそう

<script setup>
import { ref, onMounted } from 'vue'

const p = ref(null)

onMounted(() => {
  p.value.textContent = 'mounted!'
})
</script>

<template>
  <p ref="p">hello</p>
//helloはマウント前の初期値、マウント後onMountedで実装した値が入る
</template>

ウォッチャー

watch() は、直接 ref を監視することができ、 監視するrefの値が変化するたびにロジックを実行することができる

コンポーネント、プロパティ

reactと一緒、コンポーネント(一塊)を定義し要素を渡すことができる

イベントの発行

プロパティを受け取るだけでなく、子コンポーネントは親コンポーネントにイベントを発行することもできます、
要は子コンポーネントから親コンポーネントに値を渡す

スロット

プロパティを経由したデータの受け渡しだけでなく、親コンポーネントはテンプレートフラグメントを スロット を経由して子コンポーネントへ渡すこともできる
reactではなかった、要確認

環境構築

yesにした項目、JSX reactで使っていたのでなんとなく入れた
ESLintとPrettierは整形のために入れた

• JSX
• Vue Router for Single Page Application development
• Vitest for Unit testing
• ESLint for code quality
• Prettier for code formatting

JSXって何だっけ

JSXとは、「JavaScript XML」の略であり、HTMLと似たような記述をすることができる「Javascriptの拡張構文」