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

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

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

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

あまりこの方法は紹介されたサイトがなかったため、めもしておきます、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
}
スポンサーリンク

電子書籍のおすすめ比較

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()ても。

Vue-Multiselect

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

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

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

Vue.js用のselectコンポーネント比較 - Septeni 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.
Just a moment...
Just a moment...
スポンサーリンク

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.jsのおすすめライブラリ

必要になった時点でいれればOKですが、軽くリストアップ。

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

ただし、vuex-persistedstateはfirebase利用ならfirebaseのみでも回避できるため、いらないかも。

vscodeのおすすめ拡張機能

Vue.js Extension Packがありますが、いろいろとインストールされすぎます。

個人的にはveturをとりあえず、入れておけばいいかなっと。シンタックスハイライトが表示されるようになります。

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

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

  • createdはDOM生成前
  • mountedはDOM生成後
  • watchは監視してひっかける感じ

詳細は公式で。

Vue インスタンス — Vue.js
Vue.js - The Progressive JavaScript Framework
スポンサーリンク

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しかありません。

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

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

コメント

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