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

プログラミング学習

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

nuxt(vue)でchromeのdebugger起動

mounted() {
  debugger
}

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

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

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.
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>

vueのtextarea最大値サイズ調整

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

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

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

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

nextTickとレンダリング

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

レンダリング先で

forEachでまわしてquerySelector
querySelectorAll

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

コメント

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