学んだこと⑧
今日も仕事で学んだことをつらつら書いていきます。
現在、Nuxt3, Vue3, TypeScriptsで開発をしております。
- form内のbutton要素を押すとsubmitされる。
→ typeがsubmitだから。 typeを設定しないと初期値はsubmitになる。
- 「<button type="submit" @click="exec">」は使わない。
Vuejs formをサブミットするときのポイント - SIer だけど技術やりたいブログ
→Enterを押したとき、自画面に遷移してしまい、入力が消されてしまう。
→enterを押したときに、遷移を防いで、ボタンを押したときと同じ振る舞いにする。submitするのは、HTMLのバリデーションがかかるため（mailチェックなど）
方法
：<form @submit.prevent="func">とする。 ※vue
リダイレクトしない。
.prventでイベント名を前につけ、そのイベントにデフォルトでついている処理を実行しない。
【Vue】使えるイベント一覧。v-onディレクティブで指定できる主要イベント
- console.errorで赤文字エラー（コンソール）
- :class="{ 'cursor-pointer': sub.userId }”
→クラス名に「-」がつくときは、’’で囲むとできる。
- interfaceの継承
export interface animal {
id: string
name: string
status: number
animals: animalArray
}
type animalArray =
animal & {
existenceCounter: number
}
- 短い変数は使わない
https://creive.me/archives/17653/
word-break: break-word; 非推奨！
- github画像に分割
```
|表紙|中面1|
|---|---|
|!(url)||
```
- 背景色を画面によって変えたい時 head要素のbodyにクラスを持たせる。
その要素を併用するものだけスタイルを変えることができる。
useHead({
bodyAttrs: {
class: 'setting',
},
});
- SCSSだと
.parent2
.child1 {
}
parent2を親要素に持つchild1が適用範囲になる。
.class3 {
font-size: 15px;
&.class4 {
color:black;
}
}
の場合は？
class3とclass4を両方持つ要素に対して適用される。
<div class="class3 class4"></div>
class3とclass4を両方持っているので&.class4が適用される。
- チェックを監視したい v-modelでstate.〇〇で監視できる。valueの値が入る。
state.〇〇の値を変えれば、チェックも変わる。
- 【徹底解説】CSSでチェックボックス/ラジオボタンをカスタマイズする方法を超絶優しく解説する
フォームのラジオボタン、チェックボックスの色等を変更する2つの方法
- 当たり前だが、単純にtrueやfalseを送りたいときはpropsを使う。
親コンポーネントのメソッドにreturnさせても子要素には送れない。
- 配列の中にある要素が含むかみる。
`indexOf`は「2…存在する、…-1存在しません」
`includes`はtrue, falseで帰ってくる。
`test`は、大文字小文字を区別しない。
- d.ts とは
型定義ファイル
複数ファイルで利用したい型
オブジェクトの実態ではなく、型情報のみが記載されている。
- export namespace 名前空間の定義
複数の名前を一つにまとめたもの。（変数や定数）
`transition: all 0.5s ease;`
：対象プロパティ 変化の継続時間 遅れて始まる時間 アニメーション効果
ease 開始と終了を滑らかに
`transform: translateX(-10px) scale(0.95);`
translateX :横軸への移動。
scale()：拡大
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
position: absolute;
opacity: 0;
transform: translateX(-10px) scale(0.95);
}
ふわっと出す
@keyframes fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
- midware
参考：
Nuxt3のmiddlewareの登録と呼び出し&Beta版のバグとその回避策 - 独学プログラマ
ページ遷移のタイミングで起動するもの。
レイアウトファイルにimportはできない。
全てのルートで実行したい処理がある場合は、グローバルミドルウェアを使用する。
`auth.global.ts`
globalではないものの書き方 **middleware/auth.ts**
export default defineNuxtRouteMiddleware((to, from) => {
const auth = useState('auth')
if (!auth.value.authenticated) {
return navigateTo('/login')
}
})
to ... ページ遷移先のルート情報
from ... ページ遷移前のルート情報
```
呼び出し
**pages/index.vue**
```jsx
<script setup lang="ts">
definePageMeta({
middleware: ['auth']
})
</script>
navigateToをグローバルmiddlewareで使うのは注意！
あと、return をつける！
- レイアウトファイルとは
ページの外観を構成するパーツを配置する。
layoutsの中で定義されるdefault.vueとか。
- someは配列が条件を一つでも満たしていればtrueを返す
