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

プログラミング学習

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

特集:フリーランスWebエンジニアのための週2からのリモートワーク

nuxt(vue)でchromeのdebugger起動

mounted() {
  debugger
}

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

ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。
ics.media

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

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

スポンサーリンク

vue.jsのサンプル

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

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

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

Vue.js Todo App - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
Vue.js TodoMVC example - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
Just a moment...
codepen.io
Just a moment...
codepen.io
スポンサーリンク

vue.jsの環境構築

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

node.jsをインストール

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

Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org

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に定義します。

参考

Just a moment...
codepen.io
<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をそのまま書き換えてもいいかもしれません。

Nuxt.jsでのルートパスのテンプレートをindex.vueからtop.vueに変更する - Qiita
編集するファイルは、.nuxt/route.jsrouter.jsのファイルを開いてみると、以下のような記述があると思います。router.jsexport const routerOptions = {・・・・...
qiita.com

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ですが、軽くリストアップ。

  • vue-cli
  • Vue Router
  • Vuex(状態管理)
  • vuex-router-sync(route情報を参照)
  • vuex-persistedstate(リロード対策)
  • VeeValidate(フォームのエラー対策)
  • BootstrapVue(デザイン、ハンバーガーメニュー)
  • axios(サーバーとのやりとり)

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

コメント