nuxt(vue)でchromeのdebugger起動など【Tipsまとめ】

Vueの覚書です。まとまりがありませんが、、わりと何でも適当に覚書としてめもしている一時退避所みたいなところです。

nuxt(vue)でchromeのdebugger起動

mounted() {
  debugger
}

デバッガーの使い方はこちらの記事がよくまとまっています。

https://ics.media/entry/190517/

125%で1ピクセルのずれ?

ザクっと見ただけですけど、125%にすると1ピクセルのずれがでるようです。一応めもしておきます。

vue.jsのサンプル

codepen、jsfiddle、githubなどで探してみましょう。以前、少し探したものをシェアしておきますね。

vue.jsのto doリストのサンプル

定番のtodoアプリです。サンプルがいろいろとありました。

https://jsfiddle.net/ayoisaiah/v4p20ekz/

https://jsfiddle.net/yyx990803/aump8a25/

https://codepen.io/thatdaniel/pen/wggWoY

https://codepen.io/sajadhsm/pen/qomKmE

vue.jsの環境構築

めも程度に残しておきます。

node.jsをインストール

node.jsをインストールします。npmも一緒にインストールされます。

https://nodejs.org/en/download/

vue CLIをインストール

vue CLIとはVue.jsの開発を手早く進めるための便利システムです。

npm install -g @vue/cli

確認します。

vue --version

:keyについて

:keyをつけないと、レンダリング系のバグをうみやすいです。レンダリング系のバグはkeyを疑ってもいいかもしれません。

v-forなどでkeyをつけるのが一般的ですが、他にもkeyが必要な場合があります。モジュールで指定するIDが動的でない場合、keyが必要な場合があります。keyをつけると、モジュール自体が別DOMとして再レンダリングされます。

v-forのindexと他の要素の入れ子

v-forは第２引数にindexを取得できます。selectをまわしたい場合は次のようになります。

<div v-for="(item, index) in items" :key="index">
  <b-form-select
  v-model="selected[index]"
  :options="options"
  ></b-form-select>
</div>

scriptはselected[]をdataに定義します。

参考

https://codepen.io/tyariponzu614/pen/QWbGmPZ

<div v-for="(item, index) in items" :key="index">
  <b-form-select
  v-model="selected[item.name]"
  :options="options"
  ></b-form-select>
</div>

item.nameにすると、selectedはオブジェクトselected{}でdataに定義します。

v-forの0から

通常、1からですけど、keyをつけると0からになります。

<ul class="thumbnails">
  <li
    v-for="(n, i) in 3"
    :key="i"
    @click="go(i)"
  >
    <img
      :src="src[i]"
    ></img>
  </li>
</ul>

vueのtextarea最大値サイズ調整

.textbox {
  width: clamp(220px, 60vw, 1000px);
  max-height: 80px;
}

textarea文字数調整

<textarea v-model="msg" maxlength="20" placeholder="未使用"></textarea>
{{ msg.length }} //20 →全角1文字半角0.5文字じゃない

Nuxtのindex.vueとtop.vueの切り替え

めも。index.vueをそのまま書き換えてもいいかもしれません。

https://qiita.com/yuya00/items/473f62de2d9adaf872dc

Nuxtのカスタムレイアウトでトップページだけサイドバーを消す

1. layoutsのフォルダ内にdefault.vueのtemplateとscriptsをコピーしてtop.vueを作成。
2. topページでサイドバーを省いて1カラムにする。
3. index.vueに次のコードを追加。

export default {
  layout: 'top'
}

上記で切り分けができます。なおCSSはdefault.vueのものが効く模様。

nextTickとレンダリング

nextTickで待ってレンダリングが便利です。

レンダリング先で

forEachでまわしてquerySelector
querySelectorAll

みたいな感じで利用します。

Vue(Nuxt)のおすすめ開発環境

vscodeのおすすめ拡張機能

Vue.js Extension Packがありますが、いろいろとインストールされすぎます。個人的にはveturをとりあえず、入れておけばいいかなっと。シンタックスハイライトが表示されるようになります。

vue.jsのおすすめライブラリ

必要になった時点でいれればOKですが、軽くリストアップ。

リロード対策のvuex-persistedstateはfirebaseから常時データを取得していれば大丈夫ですが、firebaseを介さずVueXを使う際には便利です。会員登録するサイトでも時折、firebaseを介さずデータのやりとりをする場合があります。