"BOKU"のITな日常

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

WEB:Nuxt自己流チュートリアル(1)

画像ファイルをドラッグ&ドロップで受け取り一覧表示する/Nuxt.js+Buefy

Nuxt.jsで画像ファイルをドラッグ&ドロップで受け取り、Base64に変換してから、IMGタグで表示する・・というのをやってみます。ついでに、Fileオブジェクトの情報(名前。タイプ・サイズ)を加えて複数ファイルをうけつけた時に一覧表っぽく表示します。

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

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

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

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

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

今回は画面にUIフレームワーク「Buefy」を適用して、画面の体裁を整えます。ちょっとだけ「マシに見える」程度にはしたいなと思います。

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

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

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

今回は、Selectの選択値の変数へのバインドです。あわせて2つのSelectを並べて、片方の選択内容にあわせて、もうひとつのSelectの内容を更新するのをやってみます。

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

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

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

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

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

NUXT.JSの基本的な機能や利用方法を整理したチュートリアルをまとめてみます。しばらく「NUXT自己流チュートリアル」というテーマで、続き物を書いていく予定で、今回は、その1回目です。

Nvm・Node.js・Nuxt.jsをWindows10にインストール/自己流チュートリアル前準備

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

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

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