"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

Nuxt&Vue

状態管理ライブラリ「Vuex」(store)とヘルパー関数を使ってみる/NUXT自己流チュートリアル(8)

今回は、 「Vue.js アプリケーションのための 状態管理パターン + ライブラリです」などと紹介されているVuexとヘルパの基本的な使い方を確認しつつ、画面遷移しても状態を表すデータを保持できていることを確認するデモを作ってみます。

Nxut+Buefyでアイコンセット「Font Awesome」を簡単に使う/NUXT自己流チュートリアル(7)

UIフレームワークの「Buefy」を使うと、モダンなアイコンセット「Font Awesome」を簡単に使えるようになります。

BulmaをベースにしたUIフレームワーク「Buefy」で体裁を整える。/NUXT自己流チュートリアル(6)

今回は、ひととおりの締めとして、その画面にBulmaがベースのUIフレームワーク「Buefy」を適用して、画面の体裁を整えます。

プラグインを作ってみる。thisで参照とコンテキストで参照の2種類ぶん。/NUXT自己流チュートリアル(5)

今回は、Nuxt.jsで「プラグイン」を2種類作って、asycData()とmethodsの各ブロックの中で使ってみます。

Select選択値の変数へのバインドと、@changeイベントハンドリング/NUXT自己流チュートリアル(4)

今回は、Selectの選択値の変数へのバインドと、@change(v-on:changeでも可)を使ったイベントハンドリングでメソッドを呼んで、もうひとつのSelectの内容を更新するってのをやってみます。

input入力内容の変数へのバインドと@clickイベントハンドリング/NUXT自己流チュートリアル(3)

今回は、テキストボックス(Input)への入力バインドと、@clickを使ったイベントハンドリングとメソッドの呼び出しと画面の部分更新などをやってみます。

<templete>内における変数の参照/Vue.jsのv-if・v-forをNuxt.jsで使う/NUXT自己流チュートリアル(2)

今回は条件付きレンダリング(v-if)やリストレンダリング(v-for)および変数参照方法などのVue.jsベースの基本的なところを確認していきます。

フォルダ構成・画面遷移・静的アクセス・asyncData()等基本形をおさえる/NUXT自己流チュートリアル(1)

NUXT.JSについて、もうちょっと初心者向けのわかりやすいチュートリアルがあればいいのにな・・と散々思ったので、自分でまとめてみる気になりました。今回はその1回目です。

Node.js・Nuxt.jsをWindows10にインストールして環境設定/自己流チュートリアル前準備

Nuxt.js(Vue.js)を、Windows10にインストールして使える環境を作ります。実は、Nuxt.jsを理解するのに七転八倒した経験を踏まえて、こんなんがあったら助かったのにな・・を「自己流流チュートリアル」にまとめようと思ってたりします。なので、今回は、そ…

Nuxt.js「create-nuxt-app」の選択肢にでてくる各種フレームワークについて

Nuxt.js チームは足場ツール create-nuxt-appを実行すると、あわせてインストールするフレームワークなどを色々質問してきます。選択するものは決めてはいますが、知らなかったものもあり、それらを曖昧なままで選ばないでおく・・というのは気持ち悪いので…