【サンプル集】vue(nuxt)のrouter-linkで絶対パス(absolute path)など

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

Vueのサンプル集を紹介、またVueの覚書をかねてコードをめもしていきます。まとまりがありませんが、、わりと何でも適当に覚書としてめもしている記事です。

基本vue初心者時代に書いた記事なので初心者向けです。

vue(nuxt)のrouter-linkで絶対パス(absolute path)

リンクは通常はこうです。

<router-link to="/">トップ</router-link>

応用編としてこうもかけます。vue.jsの洋書にのっていましたね。

<router-link :to="{ name: 'Home' }">ホーム画面</router-link>

ヘッダーが共通のメニューなどで相対パスだけではurlが対応できなかったため、絶対パスにしました。外部リンクはまた別のやり方が紹介されていましたが、内部リンクはこちらでいけそうです。

router-linkのnameとpath、さらに引数を渡す

階層を掘る場合はnameではなくpathを使います。paramsで引数を渡せます。

<router-link :to="{path: `user/${getData.id}`, params: { userID: getData.id }}">{{ getData.name }}</router-link>

画面遷移先で以下のようにデータを受け取ります。

{{ $route.params.userID }}
sample.vue
created() {
  console.log('this.$route.params.userID', this.$route.params.userID')
}

propsでパラメーターを渡す方法もあります。またオブジェクトを渡すならVuexがよいでしょう。

VueRouter のページ遷移間でオブジェクトを受け渡す方法|teratail
概要TypeScript + Vue.js で画面を作成しています。Vue.js のバージョンは 2.6.11 です。 画面間の遷移に VueRouter を使っているのですが、理解が不足していてやりたいことができずに
スポンサーリンク

電子書籍のおすすめ比較

vue.jsのサンプル

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

vue.jsのcheckbox(チェックボックス)ですべて選択・非選択のサンプル

こちらの記事がとても参考になりました。

Vue.jsで「すべて選択」を実装する - Qiita
checkboxを並べて、それが3つほどで収まっている場合は、それだけでもいいでしょう。 しかし、ユーザーが自身で追加した項目など、何個出力されるか分からない場合があります。 ここではそんな時にあると便利な「すべて選択」を実装してみま...

少しコードが違います。英語ですが。

Check Uncheck All Checkboxes with Vue.js
Checkboxes are used on the page to allow the user to select multiple items from the list. By Adding check all checkbox it is easier for the users to check unche...

別のやり方もあるようです。

how to select vuejs check all uncheck all checkboxes
Get free JavaScript tutorials, references, code, menus, calendars, popup windows, games, and much more.
vuejs checkbox all - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

なお、vuetifyjsやbootstrapvueを使う場合は、@clickではなく@changeになるようだ。

下記はbootstrapvueの例。

<b-form-checkbox
  v-model="allSelected"
  :indeterminate="indeterminate"
  aria-describedby="flavours"
  aria-controls="flavours"
  @change="toggleAll"
>

@changeのあとの括弧はあってもなくてもよい。つまり、toggleAllでもtoggleAll()ても。

チェックボックスに応じて画像の表示・非表示を行う場合、v-ifの配列チェックはincludesを使うと簡単です。ES2015 でArray.some、ES2017でArray.includesが追加されました。indexOfは直感的ではありません。

<b-img
  v-if="selectedIds.includes('line')"
  class="connect"
  src="~/assets/images/line.png"
></b-img>

Vue-Multiselect

選択ライブラリもあるのですね。

Vue-Multiselect | Vue Select Library.
Probably the most complete selecting solution for Vue.js, without jQuery.

selectコンポーネント比較です。

Vue.js用のselectコンポーネント比較 - FLINTERS Engineer's Blog
こんにちは、まるやまです。 現在仕事でVue.jsを使っていますが、最近そのVue.js用のselectコンポーネントをいくつか試してみたので使った感じや、問題点をまとめてみました。

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

vueのライフサイクル(呼ばれる順番)

呼ばれる順番ですが、よく使うところだとcreated、mounted、watchの順番です。

  • createdはDOM生成前
  • mountedはDOM生成後(描画後、プラグインの初期化などを行う)
  • watchは監視してひっかける感じ

詳細は公式で。

Vue インスタンス — Vue.js
Vue.js - The Progressive JavaScript Framework

あれ?computedがない?

検証はしていませんが、こちらの記事をみました。

Vueライフサイクルの盲点、computedの一発目の発火はmountedより早い - Qiita
TL;DR ライフサイクルダイアグラム よく出てくるこの図ですが、computedって乗ってないんですよね。 さて、もうタイトルで語りたい...

created、computed、mounted、watchの順番ですかね。

watchはreturnが使えません。
thisも使えないため、適当な変数を用意します。
基本はcomputedを使いますが、非同期処理に使います。

スポンサーリンク

vueのmixinとは

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

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

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

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

:keyについて

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

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

vueのValidation(バリデーション)とは

  • いろいろな業界で使われる言葉ですが、意味は検証。プログラミングの場合はそのまんまですね。
  • vueの場合は、フォームで入力したらここ正しく入力してよ。とかだすのですね。
  • プラグインを使うなら、VeeValidate(テンプレートベース)、vuelidate(モデルベース)、独自実装の3種類の方法があります。
  • 好みが分かれそうですが、人気なのはVeeValidate。。テンプレートベースはHtml側に記述します。Script側に記述することもできるようです。
  • VeeValidateはv2とv3は文法が違うためv3の情報をみましょう。
  • nuxtでも問題なく利用できます。
  • VeeValidateはバグが少なく、Validationの種類が多いことが特徴です。画像などのバリデーションはVeeValidateしかありません。

vueのobjectのadd,clear、配列の追加削除

一瞬うまくいかなかったことがあり、調べたらこちらにまとまっていました。2記事あるようです。

【Vue】オブジェクト追加・削除には注意が必要
【Vue】配列の追加・削除には注意が必要

【Vue】配列の追加・削除には注意が必要👮 - Qiita
【Vue】オブジェクト追加・削除には注意が必要👮 の配列版です。 オブジェクトと同じく、参照するだけなら普通のJSと同だが、要素の追加・削除で嵌るポイントがあったので備忘録として。 ↓の記事も参考に。 Vue.jsは気難しい(配列...

vueでconsole.logのobjectを表示はJSON.stringify(obj)

vueというかjavascriptの知識ですね。

console.log((obj))

でもいいけど、(…)をクリックしないとChromeで値が見れません。クリックが手間。

下記にすると値が綺麗に表示されるため、視認性がよいです。

console.log(JSON.stringify(obj))

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

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

コメント

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