Vue.jsでのコンポーネント間データ受け渡しについて勉強してみた
App.vue（親） <template> <div class="top"> <first-child :hoge="title"></first-child> <second-child @input-text="addText"></second-child> <third-child :fuga="textList"></third-child> </div> </template> <script> import FirstChild from './components/FirstChild.vue'; import SecondChild from './components/SecondChild.vue'; import ThirdChild from './components/ThirdChild.vue'; export default { components:
Vueを学ぶうえで、スロットゲームを作る事で知識がとても深まった話 - Qiita
はじめに 以下本（Vue.js入門 基礎から実践アプリケーション開発まで）の8章以降の「中規模・大規模向けのアプリケーション開発」で挫折してしまったので、「スロットゲーム」を作り、知識を深める事にした。（ただ、誤解のないように言うと、この本自体は素晴らしい本で、私がこの本を手にするには、レベルが低すぎたという話） この試みが、思っていた以上に良かったので記事にしたいと思う。 Vueに苦手意識や本を読んでもイマイチよくわからなかった人は、是非「スロットゲーム」作りにチャレンジしてみて欲しい。 ちなみに、私が作った「スロットゲーム」は以下技術を使用している。 コンポーネントの再利用 コンポーネント間の連携（Vuex） ルーティング（Vue-Router） 作ったもの 以下、設計と実装について、個人的な感想も含めて書いていく。 あくまで個人的な感想であること、今回作成したスロットゲームは、あくま
Vue.jsでブラックジャックを作ってみた - Qiita
プログラミング入門者からの卒業試験は『ブラックジャック』を開発すべし ものすごい今更なうえ何番煎じかもわからないけど vue.js でブラックジャックを作ってみた。なんでかって言うと vue.js のいい感じのチュートリアルが無かったから。 完成品 デモ https://t-kojima.github.io/blackjack-vue/ リポジトリ https://github.com/t-kojima/blackjack-vue ルール ルールはネタ元にある通り、以下のものを使用。ただし A は 1 と 11 どっちでも扱えるようにする 初期カードは 52 枚。引く際にカードの重複は無いようにする プレイヤーとディーラーの 2 人対戦。プレイヤーは実行者、ディーラーは自動的に実行 実行開始時、プレイヤーとディーラーはそれぞれ、カードを 2 枚引く。引いたカードは画面に表示する。ただし、デ
すぐできる！Vueで丸バツゲームをつくってみよう
さてさて、このブログでは過去に反射神経ゲームやタイピングゲームなど、Vueを使ったちょっとしたゲームの作り方を公開してきました。 そして、最近Google Analyticsを見てみると、これらゲーム記事の滞在時間は他と比べると長めになっているのでより皆さんに喜んでいただけているようです。^^ ただ、そうはいってもゲーム開発となると見た目はシンプルでもプログラム的にはコードが複雑だったりするので、主にVueビギナーの方々へ記事をお届けしたい私からするとどのような記事がいいか少し悩ましかったりもします。 そこで！ 今回は、シンプルだけど比較的簡単にプログラムをつくれるであろう「○×ゲーム」をVueでつくる記事をお届けすることにしました。 ぜひ学習に役立ててくださいね。 （最後に教材ソースコードをダウンロードできます） ※ 開発環境： Vue 2.5 やりたいこと 子供の頃よく友達と遊んだ次の
【Vue.js】マウスオーバーとマウスリーブ
こんにちは、ryohei（@ityryohei）です！ 本記事では、Vue.jsでマウスオーバーとマウスリーブイベントの取得方法をご紹介しています。 では、解説していきます。 マウスオーバーとマウスリーブについて そもそもマウスオーバーって何だろう？ という方もいらっしゃるかと思いますので、簡単に概要を説明します。 マウスオーバーとは、パソコンの操作する際に特定の要素（ボタンや画像等）にマウスカーソルを重ねた際に何らかの処理を行うことを指します。よくマウスカーソルを重ねると画像が切り替わるボタンをウェブサイトで見かけるかと思いますが、あれはマウスカーソルを合わせた場合に画像のon、offをマウスオーバーの処理で切り替えています。JavascriptやjQueryで実装されていることが多いですが、CSSでは標準でhoverという擬似クラスが用意されていますね。 マウスオーバーがマウスカーソル
vue.js+firebaseで超簡単!ソーシャルログインを実装するまで
いまどき、アカウント作成にIDやパスワードを入力させるのは賢い選択とは言えないようです。 いやぁー便利ですよね。ソーシャルログイン。ボタン一つで会員登録＆ログインが完了してしまうんですから。 ソーシャルログインは良いものだ FacebookやTwitter、Googleのアカウントがそのまま使えるので、開発者、利用者双方に大きなメリットがあります。 利用者側の利点 列挙してみましょう。 ID・パスワードを入力する手間が省ける 運営会社にパスワードのような重要な情報を渡さなくて済む わざわざID・パスワードを覚えておく必要がない ちょっと試しに使ってみたい。というときも、お手軽に体験できるのはいいですね。 開発者側のメリット 実は開発者側もソーシャルログインによる恩恵が受けられます。最大のメリットはクライアントのID・パスワードの管理が不要になる点でしょう。 正直ね、個人情報なんて扱いたくな
Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita
Vue.jsはそのまま使ってもよいですが「自分(プロジェクト)に合ったフレームワーク」を見つけるのにも向いています。 これは、後発フレームワークだけあり各フレームワークの特徴を意識した設計がなされているためです。他の著名なフレームワークとの特徴を比較した文書もあるので、こちらをチェックしながら導入を検討するとよいと思います。 そのため、以下はVue.jsの紹介と他フレームワーク(Knockout.js と Angular)へのステップという2セクションに分けて紹介していきたいと思います。 JavaScriptフレームワークの導入を行いたいがこの選択は慎重にいきたい、という状況であれば最初にVue.jsを試金石としてみて、効果的と感じられる機能からAngularやKnockout.jsに流れていくというのは十分ありだと思います。 2016/06: Vue.jsの1.x系に合わせて記述・サンプ
Vue.jsを使う際のベストプラクティスについて考える - Considered Harmless
Vue.jsは公式のドキュメントが非常に充実しており、またフォーラムでの議論やコミュニケーションもとても活発です。開発中に何か問題に遭遇した際には、ドキュメントやフォーラムに載っている情報を参照することで、多くの問題は解決できるといって差し支えないでしょう。しかしながら、現実世界のアプリケーションを開発していると、そういった情報だけでは解決が難しい個別具体的な問題や、そもそもどう実装すれば良いのかわからない、といった場面に遭遇することも多々あります。 筆者自身がVue.jsを利用してフロントエンド開発をしてきた経験に加え、Vue.jsの公式のドキュメントやサンプルプロジェクト、そしてVue.jsを利用しているOSSのプロジェクトやVue.jsのプラグインなどのソースを読んで蓄えてきたノウハウを本資料にまとめました。 「ベストプラクティス」と銘打ってはいるものの、筆者の好みや開発経験に依存す
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～ - Qiita
はじめに Rails 5.1ではJavaScript/index.html.erb周りのサポートが大きく改善されました。 これにより、Vue.jsやReactといったモダンなJSフレームワークをRails内で非常に扱いやすくなっています。 僕も実際に試してみましたが、本当にびっくりするぐらい簡単にVue.jsやReactを動かすことができました。 そこでこの記事ではRails 5.1とVue.jsを組み合わせたサンプルアプリケーションの作成方法をチュートリアル形式で、できるだけ詳しく説明します。 また、ローカルで動かしておしまい、ではなく、Herokuにデプロイしたり、テストコードを書いたりするところまでカバーします。 この記事自体は長いですが、実際に手を動かすと（スムーズに進んだ場合）30分以内で終わらせることができるはずです！ 今回作成するサンプルアプリケーション 今回は以下のリンク先
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.Draggableを使ってサクッとTrelloっぽいものを作る - Qiita
Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita
vuejs-meetup