ここに記載する内容は、思いつくままに書きます。他の項目は後で追加します。また、いくつかのCSSも含まれています。

テキスト入力フィールドの双方向データバインディング

HTML

     <input value="123456" type="text" v-model="account" @input="handleAccountChange" class="bottom-line bottom" placeholder="アカウントを入力してください">

JavaScript

const account = ref('')
function handleAccountChange(event) {
  account.value = event.target.value;
  console.log(account.value, 'アカウント');
}

入力フィールドのクリック時の表示問題

入力フィールドがフォーカスされた際のアウトラインを無効にする

input:focus {
    outline: none;
}

検索アイコン付き入力フィールド

アイコンを左側に配置

<template>
  <input class="search-input" placeholder="検索...">
</template>

<style>
.search-input {
  background-image: url('/path/to/search-icon.svg'); /* 検索アイコンへのパス */
  background-position: right 10px center; /* アイコンの位置調整 */
  background-size: 20px; /* アイコンのサイズ調整 */
  background-repeat: no-repeat;
  padding-right: 35px; /* テキストがアイコンに被さらないようにする */
}
</style>

アイコンを右側に配置

Vueによるモバイルページでのダブルタップ拡大対策

metaタグを以下のように変更します

<meta name="viewport" content="width=device-width,initial-scale=1.0">

次のように修正します

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

Vueにおけるマージンに関する問題

 <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>

CSSグラデーションの応用

線形グラデーション（Linear Gradient）

線形グラデーションは、直線上で色を滑らかに変化させる効果です。

/* 上から下への垂直グラデーション */
.gradient {
    background: linear-gradient(to bottom, #ffcccc, #ff6666);
}

/* 左上から右下への斜めグラデーション */
.gradient {
    background: linear-gradient(to bottom right, #ffcccc, #ff6666);
}

放射状グラデーション（Radial Gradient）

放射状グラデーションは、中心から周囲へと広がるグラデーション効果です。

/* 中心から外に向かう放射状グラデーション */
.gradient {
    background: radial-gradient(circle, #ffcccc, #ff6666);
}

/* 左上から右下への放射状グラデーション */
.gradient {
    background: radial-gradient(ellipse at top left, #ffcccc, #ff6666);
}

ローカルストレージを使用した場合にオブジェクトになる理由

Vue 3において、localStorage.setItem('authToken', res)を使用すると、resがJavaScriptオブジェクトの場合、文字列に変換されて保存されます。もしresがオブジェクトであれば、その内容は[object Object]として保存され、期待される内容とは異なります。

保存する際には

localStorage.setItem('authToken', JSON.stringify(res));

読み込む際には

const authToken = JSON.parse(localStorage.getItem('authToken'));

Vue3でのページ遷移方法

コマンド

npm install vue-router@4

yarn add vue-router@4

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goToHome = () => {
  router.push('/home'); // router.push を使用してホームページに移動
};
</script>

<template>
  <button @click="goToHome">ホームへ移動</button>
</template>

console.log(route.path); // 現在のルートパスを出力

// 動的ルーティングパラメータ
router.push({ name: 'user', params: { userId: '123' } });

// クエリパラメータ
router.push({ path: 'register', query: { plan: 'private' } });