CDN版Vue.js + axios でさくっとAjaxしてみる
CDN版Vue.js + axios でさくっとAjaxしてみる Vue.jsはBabelなどを導入しなくても、scriptタグで読み込んで、わりと気軽に扱えるところも売りだったりします。 今回はVue.jsとaxiosを使用して、簡単なjsonファイルを読み込んで表示するということをしてみます。 投稿日2018年12月14日 更新日2021年06月27日 Vue.js v2.5.21 axios v0.18.0 を使用します。 index.html ベースとなるhtmlです。 https://cdn.jsdelivr.net からVue.jsとaxiosを読み込みます。 IEに対応するためにPromiseも読み込んでおきます。 メインとなるソースコードはsrc.jsに書きます。 後に作成するpriceコンポーネントを配置します。 index.html <!DOCTYPE html> <h
Vue.js おすすめライブラリ 21選（おまけ+1） - Qiita
どーも、8ビットエンジニアです。 今更感はいなめませんが、まとめます。 対象者 ・これからVue.jsを勉強する人 ・Vue.jsに興味がある人 ・npm or yarn をある程度理解している人 機能側 1. vue-chartjs vue-chartjsはvueのChart.jsのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。 デモ 公式ドキュメント 2. vue-fa Vue.js で使用するアイコンですね。 FontAwesome5 を使用しています。 公式ドキュメント 3. vee-validate vee-validateは、入力を検証してエラーを表示することを可能にする、Vue.js用のテンプレートベースの検証フレームワークです。 テンプレートベースであるため、値が変更された時にどの種類のバリデータを使用するべきかを入力ごとに指定するだけで済みます。
Vueの秘密のパフォーマンステク9選紹介 - Qiita
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
Vue.jsほぼ初心者だけのチームで既存サービスのリニューアルをやってみて得られた知見 - エムスリーテックブログ
こんにちは、エンジニアリンググループの福林 (@fukubaya) です。 2019年3月に僕たちのチームが担当するスマートフォンサイトをリニューアルしました。 リニューアルに際して、せっかくなので新しい技術やフレームワークを採用したいということで、詳しいメンバーはいませんでしたがVue.jsでリニューアルすることにしました*1。 本記事では、Vue.jsがほぼ初心者だけのチームでVue.js製プロジェクトをリリースするまでに得られた知見をまとめます。 すでにバリバリ使いこなしている方には物足りないと思いますが、これからVue.jsを始める方の参考になれば幸いです。 黒部宇奈月温泉駅は富山県黒部市にある北陸新幹線の駅。本文には特に関係ありません。 サービスの概要 開発環境 プロジェクトの管理はVue CLIで Chromeの機能拡張 Vue.js devtoolsは必須 バンドルサイズの確
傾斜をつけた割り勘計算ツールを作ってみた - Qiita
はじめに 忘年会等の飲み会イベントで幹事を任されるのは若手の宿命。 かく言う私も例外ではありませんでした。私の勤務先の場合、社員の年齢差が大きいため傾斜をつけることがほとんど。ただ、この傾斜計算、参加者全員分の年次を把握したり傾斜の具合を微調節したりと意外に面倒で時間をとられます。 いい感じのサービスがないか検索してみたものの、PCサイト用のものはスマホでレウアウトが崩れるし、スマホ向けにはネイティブアプリばかりでPCからは利用できず。意外にもPC・スマホ双方で適切に動くものは見つけられませんでした。 ないなら作ればいい、そこで会社向けに作ったのがこの割り勘計算ツール。 先日公開した割り勘計算ツール(https://t.co/w2j6PD7ZHu)のベースとなった、会社向けver。 各組織の事前に登録しておる社員を選択できて、年次情報をもとに傾斜を計算してくれる仕組み。 pic.twitt
社内Vue.jsプロジェクトユーザーインタビュー - アシアルブログ
こんにちは、WEB開発チームの斉藤です。 弊社では3-4人のチームでプロジェクトを運営するのですが、隣のプロジェクトではどうなっているのかを知れることが少ないです。 そこでVue.jsに関するブログを書いて欲しいと当番が回ってきたのですが、Vue.jsを引っくるめた話を伺うチャンスとして、インタビューしてみようと思い立ちました。 やってみたところ、Vue.js単体ではなく周辺技術を交えた総合的な内容が、回答として上がってきました。 Vue.jsをメインに据えたJSアプリの開発体験に言及されている、という前提でお読みください。 （なお、できるだけVue.js万歳という言い方や、他のフレームワークの良さを下げる言い方は避けるようにしています。） 長くなったので、読みたいところだけ読めるよう、目次を置いておきました。 主な質問内容 Sさん：入社二年目、フロントエンド構築を担当 Q: 略歴と仕事内
Twitterで草を生やせるTwithubを作った - Qiita
リンク Twithub リポジトリ サイトの内容 Twitterのつぶやきの頻度に応じて草を生やしたヒートマップを描画するサイトです 過去のつぶやきの取得には外部サイトであるTwilogのcsvを使用しています(ユーザーが多そうなため) Twilogはすぐ登録できますし、Twilogの設定内ですぐ過去3000件のツイートが取得できるので新規ユーザーの方も大丈夫です csvの読み込みはそんなに時間かからないのでちょっとの手順で見れると思います 今後の課題はスマホからの動作とツイート時の結果画像添付です 背景 QiitaHubに触発されて作りました 正直誰か作ってるやろと思ったが反応を見るにいないっぽい？ 意外と作りたかった人が多いことに気づく 月曜日にアイデアを思いつき、火曜日に開発しあとはちょくちょく触りつつ土曜日にリリースしたので一週間くらいでできました Twitterにツイートしたらわ
Vuejsでテーブル表示 vue-tables-2 - Qiita
vue-tables-2とは vue-tables-2は、Vuejsでテーブルを表示するためのライブラリ。 良い点 ソート/検索/ページングをクライアント側だけで実施することができる サーバ側の実装はデータを全件返すだけのシンプルなAPIで済む 注意点 全データをクライアント側で保持する必要がある(データ量がクライアント側で保持できるサイズかどうかを事前に確認して適用すべき) サンプルコードについて サンプルコードはすべてJSFiddleに書いています。ソースコードはリンク先を参照してください。2018/5/9時点のmasterを直接参照しているので、急に動かなくなる可能性があります。 表示してみる まずは、単純にデータを表示してみる。 https://jsfiddle.net/kimulla/9LLqhxut/19/ 実装のポイント :columnsで、表示するデータのフィールド名を指定
Vue.jsでAtomic Designを実践する - Qiita
DevicebookというNuxt.jsとLaravelを使ったWebサービスを個人開発しています。 最近、「うわっ、わたしのコンポーネント設計、見づらすぎ・・・？」と思いはじめたため、重い腰をあげてAtomic Designを導入しはじめました。 Atomic Deisngのメリット Atomic Designを導入すれば、コンポーネントの設計に統一感をもたらすことができて、再利用性が高まるという恩恵を受けられます。 今まではVue.jsのスタイルガイドに準拠しながら設計をしていましたが、個人開発サービスの規模感でも、そろそろ限界が見えはじめました。 コンポーネントの設計が、機能や開発時期によってバラつきがあるため、可読性が低い。 コンポーネントが他のコンポーネントやVuexと密結合になっているため、再利用しにくい。 つまり中規模段階に入るとVue.jsのスタイルガイドに限界が見え始める
SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だった - Qiita
SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だったOGPSPAVue.jsFirebaseFirebaseCloudFunctions この記事はFirebase Advent Calendar 2018 6日目の記事です。 はじめまして、ゆき(@twitter:yuneco)です。日頃は絵を描いたりちょっとしたWebアプリを個人開発したりして遊んでいます。今日は個人でTwitter連携アプリを開発した際に悩んだSPAの動的な（ページごとの）OGP生成について情報をまとめてみたいと思います。NuxtやSSRは使いません。 作ったもの＆OGPのイメージ 今回作った colorinco*カラーインコ はTwitter連携したユーザの投稿画像やお気に入り画像を表示し、そこから自動的にカラーパレットを生成、Twitterでシェ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ais-one/vue-crud-x: Extensible VueJS 2.0 CRUD Component
vue-crud-x - Made with Vue.js
vuejs-crud - Made with Vue.js
vuejs product app
GitHub - waseembarcha/vuejs-crud: A basics CRUD app for products build with vuejs and firestore
GitHub - matfish2/vue-tables-2: Vue.js 2 grid components
Search Options | vue-good-table
GitHub - xaksis/vue-good-table: An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc
Vue-Good-Table - Made with Vue.js