Vue.js初心者向け：Vue.jsとaxiosでJsonを取得してコンポーネントに反映するメモ - Qiita
はじめに Vue と Ajax を組み合わせて非同期で Json を取得するサンプルは意外と見付かりません。今回の実装もものすごく初歩的な方法ですが、自分的には丸1日悩んだ結果なので今後のためにメモを残しておきます。 むしろエレガントな方法を教えてください。 やりたいこと Vue インスタンス作成前ではなく、作成後にコンポーネント側で Json を取得したい。 データは専用のストアを用意して複数のコンポーネントで使い回したい。 しかし Vuex は制約がキツいので使いたくない。 Json を取得したらコンポーネントに反映したい。 コンポーネントは単一ファイルコンポーネント（.vue）を使いたい。 jQuery ではなく axios を使う axios とは Vue のドキュメントで推奨されている Ajax通信ライブラリです。jQuery を使ってもいいのですが、せっかくなので試してみました
Vue.jsでGETとPOSTを実装する - Qiita
イベントのリストをJSONで返してくれるAPIに対してGETをして、その結果を表示する例。 【GitHub】 HTMLの実装 HTMLはシンプルで、js内でelに登録するidのhomeと、v-repeatでeventsの中の要素を取得して表示している。 <div id="home"> <h1>event list</h1> <hr> <div v-repeat="t : events"> {{$index}} <h2>{{t.title}}</h2> <p>{{t.description}}</p> <p>{{t.date}}</p> <p>{{t.location}}</p> <hr> </div> <div> </div> </div>
QiitaにRails 5.1とVue.jsで作るサンプルアプリケーションの記事を書きました - give IT a try
お知らせ 前回のエントリでも「QiitaにRails 5.1の記事を書いたよー」というお知らせをしましたが、もう一本新しい記事を書きました。 今回書いたのは「【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～」という記事です。 どんな内容なの？ Rails 5.1で追加されたJavaScript関連の新機能を使って、下のような簡単なVue.jsのアプリケーションを作成するチュートリアル記事です。 ローカルマシンで動かして終わり、ではなく、Herokuにデプロイしたり、システムテストを書いたりするところまでカバーしています。 さらに、文章で説明するだけでなく、動画でも手順を説明しています。 Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～ コードもGitHubで公開しています。
ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方
Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと
「とっつきやすい」フレームワーク Vue.js #jsfes
秋のJavaScript 2016で登壇したスライドです
「片手間JavaScripter」にも知ってほしい、Vue.jsで実現するMVVMパターン、Fluxアーキテクチャとの距離 - builderscon tokyo 2016
「片手間JavaScripter」にも知ってほしい、Vue.jsで実現するMVVMパターン、Fluxアーキテクチャとの距離 accepted Abstract Vue.jsは、JavaScriptでMVVMパターンを実現するライブラリです。 このセッションでは、まず jQuery から始め、Vue.js による MVVM による PDS の導入、単方向データフローの導入による Flux アーキテクチャへの接近までをコード例を交えて見ていきます。 Vue.jsを題材にしますが、「Vue.jsの使い方チュートリアル」のようなものではなく、アーキテクチャ寄りの話題になります。「片手間 JavaScripter」だったわたしが、実践的な SPA を開発する中で得た知見を大放出します。
Vue.jsとその未来 2.0 - WordBench 京都 & ng-kyoto 10月勉強会 #wbkyoto #ng_kyoto #wordbench - niwatakoのはてなブログ
twitter.com 一昔前のフロントエンドの開発手法に慣れていて移行したいかたや、サーバーサイドエンジニアで少しフロントエンドも関わってみたいかたにもおすすめできる、 シンプルでわかりやすく、かつ強力なフレームワークであるVue.js。 今回はVue.jsに関する基本的な話のほか、最新バージョンであるVue 2.0についてご紹介したいと思います。 WordBench京都 x ng-kyoto共催イベントでVue.jsについて話しました！#wbkyoto #wordbench #ng_kyotohttps://t.co/zgIiTnXGST— Potato4d (@potato4d) 2016年10月9日 Vue.jsとその未来 2.0 資料です フレームワーク使ったことある人、多いですね Vue.js使ったことある方、少ないですね SPAやったことある人、まあいる ドキュメントの翻訳を
既存のRailsアプリケーションにVue.jsを採用した話 - スパイスな人生
こんにちは、id:ukstudioです。今回は弊社サービスの1つであるSPOTLIGHTSにVue.jsを採用した話をしようと思います。 SPOTLIGHTS自体は一般的なRailsアプリケーションといって問題ない作りになっているので、既存のRailsアプリケーションにどういった形でVue.jsを投入していったかを中心に書いていきます。 Vue.js採用前の状況 SPOTLIGHTS初期のJavaScriptはHTML/CSSと共に外注し納品してもらったものです。 フレームワークといった類はほぼ使っておらずjQueryに頼りきったコードでした。 当時は様々な事情によりこれはこれで妥当な判断だったと思うですが、今後社内でメンテナンスしていくうえで足かせになるであろうというのはなんとなく予想ができていました。jQueryのイベントハンドラやDOM操作がひとつのファイルにひたすら連なっているとい
Vue.js + Vuexで開発をしてみよう！
Vue.js + Vuex = Magic コンポーネント指向とFlux architectureで始めるモダンフロントエンド こんにちは、フロントエンドエンジニアの蔀です。 ここ数年のフロントエンド開発の潮流の変化は急激で、雨後の筍のように色々なフレームワークが出てきていますね。 8月末には、Mediumでこんな記事が人気になりました。 The State Of JavaScript: Front-End Frameworks と銘打たれたこの記事は、React/Angular/Angular2/Ember/Vue/Backbone といった、近年流行しているJavaScriptフレームワークに関する興味、満足度、知名度などを調査して比較してくれています。 注目していただきたいのが、「Satisfaction（使ってみて満足したかどうか）」の項目です。 近年流行しているReact.jsと
Vue.js 2.0のServer Side Renderingを試しつつ、軽くコードリーディングした - kitak blog
数日前に、Vue.js 2.0 が発表された ( Announcing Vue.js 2.0 – The Vue Point – Medium )。Server Side Renderingに対応するそうなので、pre-alphaではあるけれど、単純なサンプルを動かしつつ、軽くコードリーディングした。対象のVue.jsはこの記事を書いた時の最新のnextブランチ( fix eslint again · vuejs/vue@014ac35 · GitHub ) 2.0のポイント 内部で GitHub - snabbdom/snabbdom: A virtual DOM library with focus on simplicity, modularity, powerful features and performance. ベースのVirtual DOMを持つようになり、パフォーマンスが
Vue.jsのmixinを利用して肥大化したViewModelをリファクタリングする - 俺、サービス売って家買うんだ
今回はVue.jsのmixin機能を利用して肥大化したViewModelをリファクタリングするお話です。 肥大化してしまった例 Vue.jsを利用して画面全体をVMとして扱ことはよくあると思います。具体的には画面全体を囲むHTML要素のidををコンストラクタに渡すオブジェクトのelに設定することです。 下記の例では#js-appをelとして設定しています。 <div id="js-app" class="app"> <div>野菜検索</div> <div> <input v-model="vegetableName" placeholder="野菜"> </div> <button type="button" @click="searchVegetable">野菜を探す</button> <hr> <div>果物検索</div> <div> <input v-model="fruitsN
Vue.js が辛くなってきた | status code 51
Vue.js が辛くなってきた。 ひとまず現状の辛さをダンプ 今日チームで改めて話し合って辛さがハッキリしてきたので、それをつらつらと書いてく。 (今のチームは僕を含めて Rails プログラマが多くて、フロントエンドを専門にやってる人はいない。) グローバル変数大量問題(もしくはイベント地獄問題) たくさんの状態(変数)が必要 && 複数 DOM にまたがるレンダリングがしたい。 今は、左ペインで選択して右ペインに出す、みたいな事をしている。 左ペインはタブで様々な種類の項目を選べて、選択したものを右側でリスト化して表示している。 これをやろうとするにあたって、方向性が２つあると思っていて 左ペインと右ペインでコンポーネントを分けて、親玉 ViewModel に変更を通知して親玉がレンダリング制御する -> イベント地獄 左ペインと右ペインの上位の親玉 ViewModel をつくって全て
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vuetify — A Vue Component Framework
Element
Nuxt 2 - The Intuitive Vue Framework