Vue.jsでPWAアプリを作る - Qiita
1. PWAとは？ PWA(Progressive Web Apps)はGoogle Chromeエンジニア Alex Russell氏が2015年に考案した概念として知られています。特徴としてネイティブアプリのようなユーザー体験をWEBで提供するのが目的です。 PWAの特徴 FAST : パフォーマンスの良い、軽決な動作 Integrated : OSと統合されたユーザー体験 Engaging : アプリのような体験を提供 Reliable : オフラインでも動作する便利性 PWAを実現するAPI PWAを実現するために中心となる機能を提供するのが「Service Worker」です。 Service Worker Service Workerは「バックグラウンドで動作するプログラミング可能なネットワークプロキシ」のことです。Service Workerを利用するとWebページのオフライ
React/Vue/AngularでDOMのonやhrefにJavaScriptのソース文字列を使うのはアリか？
React、Vue、Angularユーザーに質問。 JSXやテンプレートのHTMLにおいて、デフォルト挙動のキャンセルのために、ネイティブのon属性等を仕込むのはいいのでしょうか？ まずは、アンケートにご回答ください。 React、Vue、Angularユーザーに質問。 JSXやテンプレートのHTMLにおいて、デフォルト挙動のキャンセルのために、ネイティブのon属性等を仕込むのはアリ？ 例 <a href="javascript:void(0)"> <a onclick="return false;"> <body ondragstart="return false;"> <p oncontextmenu="return false;"> — 池田 泰延@Adobe MAX Japan登壇 (@clockmaker) 2018年9月27日 個人的な意見 ここからは個人的な意見です。先のアン
Vue + Nuxt + Serverless の開発で得た知見 (主につらみ) / JSer.info 400th Memorial Event - Speaker Deck
スライド内のURL ・About ALIS：https://alismedia.jp/ja/ ・【ALISのシステム】サーバサイドアーキテクチャ:その1 〜ALIS サーバサイド構成〜：https://alis.to/AB2/articles/KBXeJ1VgwzNB ・Atomic …
Vue.jsで簡単に文字数カウンターを実装する - Qiita
Vue.jsで文字数カウンターの実装をする 背景 テキスト（文字数）カウンターを実装する必要があった 工数はあまりかけられない Vue.jsの組み込みは任意で入れて良い条件 実装 Vue.jsバージョン Vueは<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> を使いました フォーム設定 フォームは<input v-model.trim="message" maxlength="20">と<textarea v-model.trim="message" maxlength="50"></textarea> の２点 最大文字数はブラウザの制御で持たせるためmaxlengthで制御しました trimを使うことで、冒頭と末尾のスペースが入力時点でトリミングされます。冒頭に半角ス
一休.comスマホサイトのパフォーマンス改善（JavaScript編） - 一休.com Developers Blog
宿泊事業本部の宇都宮です。 一休.com スマホサイトのホテルページパフォーマンス改善プロジェクトでは、フロントエンドには以下のような要件がありました。 デザイン面は既存を踏襲する 機能はほぼ従来通り 日付等を変更した際の再検索は、画面遷移を挟まず、画面内で行えるようにする パフォーマンスをできるだけ改善する 要するに、従来と同様の機能+αを実現し、かつ、従来と同等以上のパフォーマンスを実現する、というミッションです。 このために、どのような取り組みを行ったか、紹介します。 パフォーマンス目標値の設定 まず、パフォーマンスの目標値を設定する必要があります。モバイルでは、ユーザの帯域幅は回線や時間帯によって大きな変動があります。多少回線状況が悪くても、閲覧を妨げない程度のパフォーマンスを実現する必要があります。 一休へアクセスするユーザのモニタリングを見ると、極端に遅い回線を使っているユーザ
お天気アプリで学ぶVue.jsのAPI連携 ｜ Tips Note by TAM
Vue.js で気象情報を表示させてみたいなとふと思い立ったので実際に作りながらVue.jsのAPI連携についてもまとめてみました。 今回実装するに当たってAPIからデータの取得が簡単に行えるaxiosを利用します。 基本的なVue.jsの使い方は公式ドキュメントがあります。 Vue.js - 基本的な使い方 axiosに関してより詳しく知りたいという方は以下のリンク先でご確認ください。 GitHub - axios/axios: Promise based HTTP client for the browser and node.js ■以下のように特定地域の気象情報をVue.jsで描画させることを目指します。 デモページ ■必要な準備 OpenWeatherMapでアカウント（無料）を作成し、APIキーを取得する OpenWeatherMapでは気象情報を取得できるAPIサービスが用意
Vue Patterns
GitHub PatternsComponent DeclarationComponent CommunicationComponent Events HandlingComponent Conditional RenderingDynamic ComponentFunctional ComponentRenderless ComponentCompositionPassing Props & ListenersHigher Order Component (a.k.a. HOC)Provider / ConsumerDependency injectionHandling ErrorsProductivity TipsUseful LinksFullstack Vue BookTranslations
$axios.$deleteでデータを送る方法 - Qiita
最初に ゲームのリセット機能を作ったのですが、誰でも使えるのではなく、キーワードを知っている人だけ許可しようと実装しました。その際に詰まったのが、$deleteする時にデータを送る方法。 ググれば出てきますが、英語の質問サイトが多く出てきたので、こちらに日本語で投稿しときます。 $postの場合 $axios.$post()では、中身に「url」と「引数(データ)」と「コンテントタイプヘッダー」を入れれば大丈夫です。 $deleteの場合 しかし、$axios.$deleteの場合はそれだけではうまく行きませんでした。 例)引数に送りたいデータだけを入れる → 失敗。。。。 調べてみると そこで調べてみると、$deleteの際は引数で**「data(データ)オブジェクト」を定義**する必要があるようです。 参考：https://github.com/axios/axios/issues/7
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。 開発に慣れてきたら迷うことはないと思いますが、Vue.jsをさわるのが初めてでNuxt.jsを採用した場合、どっちのドキュメントを見ればよいかわからずに、さまよってしまう事があるかもしれません（自分がそうでした）。そんなときのための、長ったらしいメモです。 この記事を書いている時点では、Vue.jsが2.5、Nuxt.jsが1.2です。 ドキュメントの歩き方 まずはガイドで概要を把握して、細かいことが気になったらAPIをあたります。 Vue.jsでの開発がはじめてであれば、本格的に書き始める前に、スタイルガイドを見ておくと、手戻りが少なくなるかもしれません。 ガイド フレームワークの使い方がわかりやすく書かれています。 はじめにから順に読んでいって、大体こんなことができる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Vue] 簡易ダイアログテンプレートを作って slot をお勉強する - Qiita
[Vue] SystemJS を使って JS 単体で vue を使いたい人生だった - Qiita
[Vue] 親子間のデータバインディングを Vuetify の実例を元に理解しようと試みた - Qiita
最速でわかったつもりになるReact / Vue.js / Angularの違い - Qiita
[Vue] Plus ボタン押されるたびにタブみたいにコンポーネントを増殖させる - Qiita
Vueのオプション構成・ライフサイクルダイアグラム - Qiita
[PHP+JS] Laravel + Vue + Vuetify でページネーションを実装する - Qiita
Vue はじめたとき this にものすごく苦しめられた話 - Qiita
Vue - v-bind:style で left プロパティの値が変化しない - Qiita
vue.js で baseurl を変更する方法 - Qiita
Vue routerでルート定義を動的に生成する方法 - Qiita
