VueコンポーネントのState管理を考える - 一休.com Developers Blog
この記事は一休.comアドベントカレンダー2018の3日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 一休.comにVue.jsを導入して、約1年が経ちました。スマートフォン版の予約入力画面から始まり、PCとスマートフォン版のホテルページほか、さまざまなUIコンポーネントがVue.jsで実装されるようになってきています。 また、予約入力画面のような複雑な状態管理を伴う画面の実装のため、Vuexを導入しています。 ここ1年ほどVue.js + Vuexというスタックで開発を行ってきて、アプリケーションの設計について色々と思うところがあったので、今回は現状でどういう構成が最適と考えているか、紹介します。 Vue.jsアプリケーションのState Vueコンポーネントには、親から受け取るpropsと、自分自身で保持するstate(data
Laravel 5.4で Vue.js開発環境を手軽に作る
上記コマンドを使用すると、現在のディレクトリに「sample」という名前のディレクトリが追加され、その中にLaravelアプリケーションが作成されます。 作成直後のディレクトリ構造は以下のようになります。 $ tree -L 1 . ├── app ├── artisan ├── bootstrap ├── composer.json ├── composer.lock ├── config ├── database ├── package.json ├── phpunit.xml ├── public ├── readme.md ├── resources ├── routes ├── server.php ├── storage ├── tests ├── vendor └── webpack.mix.js 10 directories, 8 files
[Vue.js] Bootstrap と Vue.js でイケてるフォームを実装する - atuweb 開発ブログ
Bootstrapを利用してフォームを実装しましたため、v-modelやバリデートなどについてまとめます。 イケてるフォーム イケてるフォーム 初期状態 初期状態です。 入力内容に不備がある入力欄はエラーとして赤字、赤枠で表示します。 また全ての不備が取り切れるまで Submit ボタンは disabled とします。 イケてるフォーム エラー状態が即時に反映 何か入力し、エラーがなくなるとリアルタイムでフォームに反映されます。 イケてるフォーム Submit可能状態 全てのエラーがなくなると、Submit ボタンがアクティブになり、ボタンを押下することができます。 ごめんなさい、普通のフォームでした。 環境 Node.js 7.7.x npm 4.4.x Vue.js 2.2.x 素のHTML イケてるフォーム Vue.js 化前の状態 上の状態、Vue.js の処理を入れる前の状態の
![[Vue.js] Bootstrap と Vue.js でイケてるフォームを実装する - atuweb 開発ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8c9f01ae438463c4cc5c07978089ee6e41b3e421/height=288;version=1;width=512/https%3A%2F%2Fatuweb.info%2Fimages%2Feyecatches%2Fvuejs_lg.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
