VueでCSV→JSON変換。vue-papa-parseの使い方 | とあるエンジニアのエソラゴト
個人開発をしている時に、「Vueを使い、CSVファイルをアップロードすると、JSON形式に変換してくれる処理」を書きました。 検索しても、「CSV→JSONへの変換が簡単に出来るライブラリの使い方」について、詳しく書いている記事がありませんでした。ということで、「vue-papa-parse」というライブラリがすごく使いやすかったので、今回はその共有となります。 非常に簡単に変換処理が書くことが出来ましたので、vue-papa-parseの使い方はこの記事でマスターできます。 最終的には、以下のようなものを目指します vue-papa-parseを使うことで、非常に短い行数で書けます。とても便利なので、ぜひマスターして下さい。
VueでFirestoreのSubscribe機能を使いたい時のアプローチ
はじめに VueでFirestoreのSubscribe機能を使ってリアルタイム処理を行いたい時に、いくつかアプローチがあるのですが、それをそれぞれ検証してどうだったかを記録として残しています。 同じように、Vue・FirestoreでSubscribe機能を使いたい人の参考になれば嬉しいです。 今回、検証に使用した環境は以下です。 Nuxt.js v2.4.0 TypeScriptは未使用 FirestoreのSubscribe機能について Firestoreで、データの変更があった時に変更差分をクライアント側に通知させる際に、onSnapshotメソッドを使用します。 https://firebase.google.com/docs/firestore/query-data/listen 大まかな手順として、 リアルタイム検知したいFirestoreのドキュメントを指定して、監視対象と
vue-composition-apiを使って機能単位のコード分割と合成を試してみた - Qiita
概要 この記事では、Vue.js ver 3.0 で採用予定の Composition API (https://vue-composition-api-rfc.netlify.com) を使って、このRFCの動機のひとつである「Code Organization」がどのようにして実現可能なのかを試しに実装してみた結果をまとめました。 はじめに100行超の単一のSFCでデモアプリを実装し、そのあとに「Function -> Module -> Component」の順番で機能単位での分割を進めた前後のコードを比較しています。 Composition APIでどのように実装すべきかを模索されている方にとっての参考になれば幸いです。 Logic Reuse & Code Organization The APIs proposed in this RFC provide the users w
なぜ、Vue Composition APIを使うのか、理解する【メリット/デメリットまとめ】 - Qiita
はじめに Vue3のリリースが迫ってきました。 順調に行けば、公式リリースは8月上旬のようです。楽しみですね。 Our current target dates are mid July for the RC (release candidate) and early August for the official release of 3.0. https://github.com/vuejs/rfcs/issues/183 Vue3の目玉の機能として、「Composition API」があります。 この記事では、「”なぜ” “なんのために” Composition APIを使うのか」理由について、まとめています。 「Composition APIの使い方」についての説明は、この記事では割愛します。 以下の記事に、具体的なComposition APIの使い方とProviderパターンに
Official Vue.js News
🍰 Vue.js v3.0.0 "One Piece" Released! 🎉 The State of Nuxt.js and more! Hello! The time is now! Vue.js v3.0, codename "One Piece" has just been officially released! 🎉 Watch the announcement talk by Evan You! This is a huge milestone for us that, to quote Evan You himself „represents over 2 years of development efforts, featuring 30+ RFCs, 2,600+ commits, 628 pull requests from 99 contributors, p
Vue.jsでドロップダウンメニューを作る【Vue.jsで作るUIシリーズ】
Vue.jsでドロップダウンメニューを作る【Vue.jsで作るUIシリーズ】 2018/10/30 2018/11/4 JavaScript, プログラミング こんにちは！ケインコスゲ（@keinkosuge）です。 前回に引き続き、Vue.jsで作るUIシリーズをお送りしたいと思います！ 今回は、Vue.jsでドロップダウンメニューを作る、です！ Vue.jsで作るドロップダウンメニュー・完成形のイメージ それではまずは、具体的にどんなドロップダウンメニューを作るのか、具体的な完成イメージを見てください！ WebサイトやWebサービスなどで、サイドバーに使用されるようなドロップダウンメニューを想定しています。 ナビゲーションメニューをクリックした時に、その下層メニューがある場合は下層メニューが開閉するような仕組みになっています。 Vue.jsで作るドロップダウンメニュー・完成形コード事例
SPAのVue.jsとGoogle Analyticsを連動させたい
SPAのサイトにGoogle Analyticsを導入することは色々大変なのですが、Vue.jsの場合はvue-analyticsを使用することで簡単に導入することができます。 インストール 以下のコマンドでvue-analyticsをインストールします。 $ npm install vue-analytics vue-analyticsのセットアップ vue-analyticsのセットアップは以下のように行います。 import Vue from 'vue'; import VueAnalytics from 'vue-analytics'; // Configuration VueAnalytics Vue.use(VueAnalytics, { id: 'UA-xxxxxxxxx-x' }); idには、自分のGoogle AnalyticsのIDを設定してください。 マニュアルでト
動的ルートマッチング | Vue Router
パターンを使って同じコンポーネントにルートをマップする必要がしばしばあるでしょう。例えば、 User コンポーネントは全てのユーザーに対して描画されるべきであるが、それぞれ異なるユーザー ID を持つ場合などです。vue-router ではパスの中の動的なセグメントを使用して実現できます。 const User = { template: '<div>User</div>' } const router = new VueRouter({ routes: [ // コロンで始まる動的セグメント { path: '/user/:id', component: User } ] }) これで /user/foo や /user/bar などの URL 両方とも同じルートにマッチします。 動的セグメントはコロン : を使って表されます。ルートがマッチした時、この動的セグメントの値は全てのコンポー
Vue Parent and Child lifecycle hooks
If you have built anything in Vue, I am sure you will be familiar with the component lifecycle hooks, but you may not be aware of the unintuitive order that these hooks will fire when dealing with parent and child components and what affect that may have on your props. Vue lifecycle flowchartParent/Child lifecycle hooksThe example below outputs a message when the Mounted and Created hooks are fire
新Vue.js「Vue 3」で便利に使えるさまざまな新機能を先取りで紹介
「Vue 3」は、JavaScriptフレームワークVue.jsの次期バージョンで、2016年にリリースされた「Vue 2」以来のメジャーバージョンアップです。Vue 3で導入される新機能のうち、前回は新しいコンポーネント記述形式「Composition API」を紹介しました。今回は、それ以外の主な新機能を説明していきます。 はじめに Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。 前回記事ではコンポーネントの新しい記述形式「Composition API」を紹介しましたが、他にもさまざまな新機能がVue 3で導入されます。本記事では、それ以外の主な新機能を抜粋して紹介していきます
プログラムによるナビゲーション | Vue Router
宣言的なナビゲーションとしてアンカータグを作成する <router-link> がありますが、ルーターのインスタンスメソッドを使ったプログラムによる方法でもそれは可能です。 # router.push(location, onComplete?, onAbort?) 注意: Vue インスタンスの内部では、$router としてルーターインスタンスにアクセスできます。従って、this.$router.push で呼ぶことができます。 異なる URL へ遷移するときに router.push が使えます。このメソッドは history スタックに新しいエントリを追加します。それによってユーザーがブラウザの戻るボタンをクリックした時に前の URL に戻れるようになります。 このメソッドは <router-link> をクリックした時に内部的に呼ばれています。つまり <router-link :
[vue.js] routerでpropsに値を渡してURL遷移する - １分技術ブログ
バージョン Vue.js 2.6.10 概要 routerのpushでURL遷移する際にpropsにデータを渡す方法。 コード ◾️hoge.vue（遷移元） <script> export default { methods: { newPage() { this.$router.push({ name: "user_list" , params: {user_code : this.userid}}).catch(() => {}); }, } }; </script> ◾️fuga.vue（遷移先） <script> export default { props: { user_code: String }, }; </script> router.jsのpropsをtrueに設定する必要がある。 ◾️router.js { path: "/dashboard/fuga", name
![[vue.js] routerでpropsに値を渡してURL遷移する - １分技術ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/64751487494b1eb31cd4168daf8d31c98579282c/height=288;version=1;width=512/https%3A%2F%2Fimages-fe.ssl-images-amazon.com%2Fimages%2FI%2F51z65rpIUxL._SL160_.jpg)
NativeScript-Vue - A NativeScript plugin for building truly native applications using Vue.js
Truly native apps using Vue.js and NativeScriptWant to release that app you've been dreaming about without the hassle of learning new languages? NativeScript-Vue is the right choice for you! Get Started Easy to get started with.NativeScript-Vue is easy to get started with, it is a single dependency that you can install through npm.
Nuxt.js で簡単な画像一覧アプリを作成する – Part.1 | luftgarden
オトナのプログラミング勉強会について 「オトナのプログラミング勉強会」は、熊本で開催しているプログラミングの勉強会です。 基本的に月2回（第1水曜日、第2水曜日）開催となります（2018/05/03現在）。 熊本のコワーキングスペース「未来会議室」共催のオープンでやっている勉強会ですので、参加は完全無料です。（プログラムを書く人を増やす、繋げることが目的なので、誰でも参加できるというスタンスです） 今回は、2018年4月18日に開催された「オトナのLaravel＆Vue.js開発入門@未来会議室」勉強会の参加レポートです。今回はNuxt.jsとDog APIを使って犬種ごとに画像表示するWebアプリの作成を行いました。 主催者の方から内容掲載の許可をいただきましたのでブログにまとめておきます。 Nuxt.js とは Nuxt.js は Vue アプリケーションを作成するフレームワークです。
【Nuxt.js】Vuex基礎編：コードをスッキリさせよう｜aLiz
🎈 この記事はWPへ移行しました 【Nuxt.js】Vuex基礎編：コードをスッキリさせよう # 前置きHappy Valentine❤️🍫 ということで(？)本日はVuex！ 3つに分けて書きます✍️ ・vuexとは何か ・メリットは ・簡単な使い方 公開予定日を過ぎ、 申し訳ございません🙇♀️ 自社開発アプリを進めておりました📱 # Vuexとは状態管理のライブラリです。 って言ってもイメージ沸かないので… 簡単に言うとデータ保存ができるもの ・ログイン情報が ページ遷移後も保持されたり、 ・APIのデータ引っ張ってきて保存とか、 ・methodsに何度も同じ処理書かずに済む とかとか。 $emitも何回も書かなくていいし楽！ とにかく楽！！！そんな感じです。 状態保持をするのでstoreに書きます✍️ # メリット上記の内容がそのままメリット コードもまとまって楽ちんなのは
【Vue.js】vue-touchで簡単スワイプ操作実装！
今回はJavaScriptフレームワーク「Vue.js」のインストール方法と、 vue-touchを使ってスワイプ操作を実装する方法をまとめてみました。 スマホ用サイトの開発で、スワイプ操作の導入を考えている方は是非参考にしてみてください。 Vue.jsの環境構築 Node.jsのインストール https://nodejs.org/ja/ とりあえず推奨版と書かれていたので、10.13.0LTSの方をインストールしました。 vue-cliでプロジェクトを作成 コマンドプロンプト // vue-cliのインストール $ npm install –global vue-cli //プロジェクトの作成。今回は「my-project」というプロジェクトを作成します。 $ vue init webpack my-project //作成したプロジェクトに移動 $ cd my-project //起動
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js で子コンポーネントのcreatedと親コンポーネントのmountedは順序が保証されている？
VuexでTodoリストを作成する。
【サンプルあり】Vuetify で DatePicker付きの テキストフィールドを作る！【v-date-picker】｜ProgLearn｜エンジニアのためのプログラミング情報メディア
Nuxt.js/Vue.jsでもスワイプでページ移動したい - Qiita
