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

router-link

router-linkの記事はこちらに移動しました。

router-linkでpath/queryなどパラメーター追加【vue(nuxt)】
vueのrouter-linkのまとめです。 vue(nuxt)のrouter-linkで絶対パス(absolute path) リンクは通常はこうです。 <router-link to="/&quot...

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

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

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