たぶん、Vue.jsを使い慣れている人は起こさないであろう、本当に初歩的なミス。
慣れないうちはエラーの内容から何がいけないのか推測しにくいと思ったので自分の備忘記録のためにも・・・
というかそれがメイン。調べてもなかなか見つけられなくて時間かかりすぎる・・・（自分の知識がなさすぎるから）
Vue.jsに限ったことではないけど、間を開けずに勉強実践習得すべき・・・
随時追記していく予定です。間違っていたらコメントください。
scriptの位置
いつも（jQuery）の癖で、headタグ内に書いていて動かなかった。
CDNの読み込みはheadタグ内でも問題ない。
id="app"とした場合、そのel: '#app'に関するの記述は、id="app"より後ろでないといけない。
インラインの場合も外部ファイルの場合も同様。
もしかしてこれかもって気づくまで2hくらい つらい
参考：https://qiita.com/icbmuma/items/49078cbe7cfe7dd2cd5f
これにたどり着けて確信。
el: '#app'が複数存在している
これは、ちゃんと自分で考えてすすめていたら起きなそうだけど。
私の場合は、いろんなものを参考にしながらすすめていたため、消し忘れていて気づかずにずっと使っているコードだけを確認していた。
一部動いて一部動かないみたいな状態だったので、余計に気づかなかった。
それに気がついたの多分3h後とか。。。ないた
dataに定義し忘れている
それに関わる部分が、ごっそり表示されない。
でも、Consoleにエラーが出るからまだわかる
{{ messege }}の{が一つでもかけている
純粋なタイプミスだが、elで指定していた部分すべてがなにも表示されないのでどこをミスったのか探すのに時間がかかった。
Consoleにも何も出ない。
コードも何も出ていない。
this.のつけ忘れ
これは、この先もやりそう・・・
すぐ気づくようにはなってきたけど・・・
特に、methods:の中で他のメソッドを呼びたい時とか忘れる。
setTimeoutの書き方
setTimeout(this.close(), 3000);
ではなくて
setTimeout(this.close, 3000);
コンポーネントにv-on:clickを付けたい場合
子コンポーネントで親のメソッドを呼びたい時
例えばこんなやつ
<next-button v-on:click="search_start">次へ</next-button>
.nativeが必要
<next-button v-on:click.native="search_start">次へ</next-button>
コンポーネントで持たせたい属性のデータの中に別のデータも持ちたい時
<com-child val="あなたは{{ select_value }}を選択した">
こんな感じなことをしたいとき（↑は{{ select_value }}がそのまま文字列として表示される）
<com-child :val="'あなたは' + select_value + 'を選択した'">
これでいける
ひとつの記事にまとめました
Vue.jsで属性かv-bindかの応用
template要素はコンポーネント内では使えない
v-ifで要素を出し分けたい時には、<template v-if="valueA">のように出し分けたい要素が複数あった場合でも、HTML構造を変えることなく使えるが、
コンポーネントのテンプレートを定義するところでは使えない。
template: '<template><p>コンテンツ1</p><p>コンテンツ2</p></template>'
これは間違いで表示されない
コンポーネントでpropsを使う場合はケバブとキャメルに注意！
コンポーネントを定義する側ではキャメルtitleText
HTML側ではタグ名・属性名はケバブtitle-text
※追記
HTMLでのカスタムタグはパスカルでも問題ないらしい
classやid,valueなどにbindするときは:をつける
よく忘れて、ん？ってなる・・・
<input type="radio" :id="who.val" :value="who.val" v-model="form.who">
例えばこんなやつ
v-modelはコンポーネントできない
v-modelをコンポーネント内にセットし、propsで値を渡すことはできない。
<vue-input name="input" v-model="form.input"></vue-input>
のように、v-modelを付けたい要素がルートなコンポーネントはできる
<div class="textArea"><textarea v-model="form.textarea"></textarea></div>
のように、ルートでない場合はできない
window または document が undefined のとき
とあるモジュールを入れたら、
document is not defined とか window is not defined とかでた。
<no-ssr> で囲う
参考：https://crieit.net/posts/Nuxt-document-is-not-defined
$store.gettersはcomputedで呼ぶ
呼ぶっていう表現があっているかわからないけど、、
storeで定義している値を参照するときはdataではなくてcomputedに書く
dataに書くと、たまにデータがまだ取得できていない時に処理が走っているよう
※追記
基本的にはcomputedで問題なさそうだけど、抜け落ちる時もあるっぽい・・・
beforeRouteLeaveはサブコンポーネントでは使えない
編集中の内容が保存されていなかったりした時に、アラートを出せるが、これはルートコンポーネントしか使えないらしい
使う方法
https://ja.coder.work/so/vuejs2/724205
$emitで引数を渡す場合、()注意
<child @child-event="handler" />
<child @child-event="handler($event)" />
↓はダメ
<child @child-event="handler(event)" />
onloadとonerrorは@loadと@errorで使える
ミスじゃないけど、これだけの記事立ち上げるほどでもないのでここに・・
<img @load="imageLoad" @error="errorCheck" :src="imageFile">
v-forのkeyにindexを入れればいいわけではない・・
何も考えず、:key="index"とよく設定していたが、ページ遷移するタイプのときに、
同じものとして扱われていて、不都合が生まれた時があった。
:key="item.id"とかにしたほうが良さそう
formタグに@submit.preventを書く
formを使って実装していない場合でも、Password field is not contained in a formとコンソールにWarningが出ていてこれを解消しようとすると、formタグで囲うなどが必要だが、囲うだけだとエラーも何も出ず、フォームが実装されない。
<form @submit.prevent>とする必要があるらしい
$refsで取得するDOMの順番は保証されない
v-forにrefをつけて、スクロールポジションによって処理をしたかったが、どうにもずれる。
ずれないときもある。。。
どこかの計算が間違っているのかと結構何日も検証してた・・・
index順にDOMを取得できていないとは・・・
indexでsortしたり、indexをキーにfindすることによって解決しました。
https://qiita.com/bagooon/items/058db1431fc7d02b6aeb