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

おすすめのオンラインプログラミング学習

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

nuxt(vue)でchromeのdebugger起動

mounted() {
  debugger
}

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

ChromeのデベロッパーツールでJSをデバッグする方法(2019年版)
JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 本記事ではGoogle Chromeブラウザーの「C...
スポンサーリンク

vueのmixinとは

mixinとはVueのデフォの機能です。VueComponentのコードを再利用する際に共通化するのがmixin。クラスを継承するような感じです。
用途としては、たとえばComponentにloading.vueを用意し、ページのloading画面を共通化します。

mixinを使わなくても、injectなどの代替手段もあります。

mixiinの使い方や問題点は下記の記事が参考になりました。ありがとうございます。

俺がやらかしたVue mixinのアンチパターンから学ぶmixinの使い方と代替案
VueComponentのリファクタリングや構造化をしようと思ったとき、選択肢の一つとしてmixinが考えられますよね。しかし振り返るとうまく実装できていないケースがちらほらありました。なぜそうなってしまったかと、それを踏まえての適切なmixinの使い方または代替案についてまとめてみました。mixin実装時のご参...
スポンサーリンク

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.
Vue.js TodoMVC example - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Attention Required! | Cloudflare
Attention Required! | Cloudflare
スポンサーリンク

vue.jsの環境構築

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

node.jsをインストール

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

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

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は第2引数に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に定義します。

参考

Attention Required! | Cloudflare
<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>

Nuxtのマスタッシュ構文で改行されない

たとえば、複数のエラー文を表示する場合、\nはbrタグではなく、改行されません。かといって、brにすると、brという文字列がマスタッシュ構文でそのまま表示されるだけ。

this.errors = result.errors.join('\n')

その場合、CSSで調整します。

<div style=" word-wrap: break-word; white-space: pre-wrap;">
{{  errors  }}
</div>

nextTickとレンダリング

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

レンダリング先で

forEachでまわしてquerySelector
querySelectorAll

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

ご参考になれば幸いです。

コメント

タイトルとURLをコピーしました