The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

Vue.js

【Vue.js】$refsで取得した要素で使えるプロパティ【ref】

【Vue.js】$refsで取得した要素で使えるプロパティ【ref】 今回は以下のような実装をしました。See the Pen vuejs-refs-test by duotaro (@duotaro100) on CodePen.pタグとulタグ、liタグにそれぞれ「ref」属性を付与して、それぞれの要素を取得します。 そ…

【Vue.js】TSとVue.jsを書く場合に、$refsへの参照でエラーとなる【TypeScript】

【Vue.js】TSとVue.jsを書く場合に、$refsへの参照でエラーとなる【TypeScript】 実装した内容 要素の高さを取得したかったので、Vueの$refを使いました。 取得したい要素に、ref属性をつけることでその要素の情報を取得することができます。 html側 <div> <p ref="test">テスト</p></div>…

【Vue.js】Vue Carouselを使ってカルーセルを実装する その1【デフォルト・自動・ループ】

【Vue.js】Vue Carouselを使ってカルーセルを実装する その1【デフォルト・自動・ループ】 Vue.jsを使っているプロダクトにカルーセルを組み込もんだ時に、Vue Carouselを使いました。 簡単な使い方を何回かに分けてまとめます。 今回はデフォルトの動きと、…

【Vue.js】Vue.jsでaタグにhrefを設定した際に、画面遷移せずに他の処理を実行する方法【prevent.stop】

【Vue.js】Vue.jsでaタグにhrefを設定した際に、画面遷移せずに他の処理を実行する方法【prevent.stop】 もともとvue-routerで実装していたが、aタグで設置して欲しいという要望がきました。 (SEOとか、右クリックで別タブで開きたいとか) aタグにして画面遷…

【Vue.js】Vuexでストアオブジェクトをモジュールに分割する【Vuex】

【Vue.js】Vuexでストアオブジェクトをモジュールに分割する【Vuex】 【前回】Vuexの基本的な使い方 www.sky-limit-future.com Vuexを使用する際に、単一のストアオブジェクトを使っているとストアオブジェクトが膨れ上がってきてしまいます。 すると管理が…

【Vue.js】Vue.jsでボタンをdisabledして押せなくする方法【:disabled】

【Vue.js】Vue.jsでボタンをdisabledして押せなくする方法【:disabled】 本日はVue.jsを使って、ボタンを押せなくする方法を解説します。 ボタンを押すとdisabledにする 実装は簡単で、ボタンを押したかどうかのフラグを用意しておき、ボタン押下と同時にフ…

【Vue.js】mixinを使ってグローバルメソッドを定義する

【Vue.js】mixinを使ってグローバルメソッドを定義する 今回はVue.jsの各コンポーネントで使用するグローバルメソッドの導入方法を解説します。 ここではグローバルミックスインを使った手法を使います。 目次 グローバルメソッドの定義 ミックスイン設定 グ…

【Vue.js】Vue.jsでChart.jsを使う

【Vue.js】Vue.jsでChart.jsを使う 今回はvue-cliで作成したVue.js + webpackアプリケーションにChart.jsを導入する方法を解説します。 ここではvue-chartjsを使って導入します。GitHub - apertureless/vue-chartjs: Vue.js wrapper for Chart.js 元となる…

【Vue.js】Vue.jsアプリケーションにSNSシェアボタンを導入する【Facabook/Twitter/Hatena】

【Vue.js】Vue.jsアプリケーションにSNSシェアボタンを導入する【Facabook/Twitter/Hatena】 今回は、Vue.jsを使って作成したアプリケーションにFacebook,Twitter,Hatenaのシェアやブックマークボタンを設置する方法を解説します。 それぞれ公式サイトで用意…

【モーダル】Vue.jsで作成したモーダルの外側をクリックした時に閉じるようにする

【モーダル】Vue.jsで作成したモーダルの外側をクリックした時に閉じるようにする 今回はVue.jsで作成したモーダルの外側をクリックした時に、そのモーダルを閉じる方法を解説します。以下のページでは、Vue.jsを使ったモーダルの作成方法と、今回の記事内容…

【filter】Vue.jsのfilterで金額にカンマを入れる【フォーマット】

【filter】Vue.jsのfilterで金額にカンマを入れる【フォーマット】 ここではVue.jsを使って金額にカンマを入れるフォーマット処理について解説していきたいと思います。 目次 カンマの付け方 filterの作成 filterの使用 カンマの付け方 最初に、金額にカンマ…

【アドセンス】Vue.jsアプリケーションにアドセンス導入【vue-cli】

【アドセンス】Vue.jsアプリケーションにアドセンス導入【vue-cli】 今回はvue-cliを使って作ったVue.js + webpackのWEBアプリケーションにGoogleアドセンスを導入する方法を解説していきたいと思います。 ここではvue-google-adsenseというプラグインを用い…

【Vue.js】titleタグやmetaタグ(description)を書き換える方法【vue-router】

【Vue.js】titleタグやmetaタグ(description)を書き換える方法【vue-rouetr】 ここではVue.jsを使ったアプリケーションで、ページタイトルやmetaタグのdescriptionを動的に変更する方法を解説します。 titleタグやdescriptionはSEOで最も基本かつ重要なポイ…

【vue-cli】webpackで作成したアプリケーションで、v-bindした画像の読み込みがうまくいかない【v-bind】

【vue-cli】webpackで作成したアプリケーションで、v-bindした画像の読み込みがうまくいかない【v-bind】 目次 ■v-bindした画像パスが正しく読み込まれない ■vue-loaderのアセットURLハンドリング ■解決方法 v-bindした画像パスが正しく読み込まれない vue-c…

【Vue.js】VueアプリケーションがSEO的によくなさそう??【SPA・シングルページアプリケーション】

【Vue.js】VueアプリケーションがSEO的によくなさそう??【SPA・シングルページアプリケーション】 ここでは「単一ファイルコンポーネントを使わない」Vueアプリケーションについて言及しています。 目次 ■単一ファイルコンポーネントを使わないVueアプリケ…

【Vue.js】さくらのVPSにvue-cliを使って作成したVueアプリケーションを公開した方法【さくらのVPS】

【Vue.js】さくらのVPSにvue-cliを使って作成したVueアプリケーションを公開した方法【さくらのVPS】 前提 ・Macで実施しています(Windowsなどは方法が異なる場合があります)経緯などを読み飛ばしたい方はさくらのVPS上にvue-cliで作成した(単一ファイルコン…

【vue-router】router-link でクリックイベントが反応しない【 v-on:click / @click】

【vue-router】router-link でクリックイベントが反応しない【 v-on:click / @click】 タイトル通りで、vue-routerを使っている場合に、router-linkにクリックイベント(v-on:click / @click)を定義しても、反応しません。 そんな時にどうしたら良いか、2つの…

【Vue】router-linkのv-on:clickを有効にする方法【vue-router】

【Vue】router-linkのv-on:clickを有効にする方法【vue-router】 vue-routerを使用している場合、router-linkを使う場面も多いかと思います。 その中でクリックした場合の挙動などを設定するために、 v-on:click もしくは @click を使いたいたかったので、そ…

【IE11】IE11で動かした時に、vue-routerの定義で「':'がありません」と怒られる【Vue】

【IE11】IE11で動かした時に、vue-routerの定義で「':'がありません」と怒られる【Vue】 以前、嫁のために作成したWEBアプリ。 github.com献立管理アプリですが、これはVue.jsとvue-routerを使用して作成しています。 嫁の会社のパソコンがIEしか入っていな…

【モバイルアプリ開発】NativeScript-Vueとは【NativeScript, Vue.js】

【モバイルアプリ開発】NativeScript-Vueとは【NativeScript, Vue.js】 nativescript-vue.org翻訳しました。(googleが) NativeScriptとは NativeScriptは、JavaScriptを使用して本来のモバイルアプリケーションを構築するためのオープンソースのフレームワー…

【Vue.js】Vue.jsとLocalStorageを使って献立管理アプリを作成 一覧画面 - Part3 - 【LocalStorage】

【Vue.js】Vue.jsとLocalStorageを使って献立管理アプリを作成 一覧画面 - Part3 - 【LocalStorage】 前回まで www.sky-limit-future.comwww.sky-limit-future.com mainComponent.jsの解説 part2 一覧画面 一覧画面の機能は以下の通りです。・一覧表示機能 …

【Vue.js】Vue.jsとLocalStorageを使って献立管理アプリを作成 登録画面 - Part2 - 【LocalStorage】

【Vue.js】Vue.jsとLocalStorageを使って献立管理アプリを作成 登録画面 - Part2 - 【LocalStorage】 前回 www.sky-limit-future.com mainComponent.jsの解説 part1 indexComponent 今回はホーム画面から一覧画面にリダイレクトしているので使用していません…

【Vue.js】Vue.jsとLocalStorageを使って献立管理アプリを作成 - Part1 - 【LocalStorage】

【Vue.js】Vue.jsとLocalStorageを使って献立管理アプリを作成 - Part1 - 【LocalStorage】 嫁が管理栄養士なのですが、「こんなアプリが欲しい」と言われたので作成しました。 内容は献立管理アプリです。 ある献立が直近で使われた日付がすぐ分かるように…

【Vue.js】Vue.jsでAjax通信(php)【axios,php】

【Vue.js】Vue.jsでAjax通信(php)【axios,php】 今回はVue.jsからAjax通信でWEBAPIを呼び出し画面に反映することを目的とします。 今回はphpを使っていますが、そこは問題ではないのでphpには焦点を当てないで書いていきます。Vue.jsの公式ドキュメントで推…

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - Vuexの導入 -

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - Vuexの導入 - 前回はプロジェクト作成まで実施して、実装に入ろうと考えたが、状態管理のためにVuexを導入しようと思います。 使用したPWAテンプレート(vue-pwa-boilerplate)には、Vuexがはいっていない…

【Vue.js】Vuexを導入して、データの状態変化管理を簡単にする【Vuex】

【Vue.js】Vuexを導入して、データの状態変化管理を簡単にする【Vuex】 今回はVuexを学びます。 Vuexは簡単にいえば、「コンポーネント間のデータのやり取りを簡単にするもの」です。 いままで、コンポーネント間のデータのやり取りは以下の記事のようにやっ…

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - プロジェクト作成 -

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - プロジェクト作成 - そろそろPWAへの理解を深めないとダメだなと思ったので、Vue.jsでPWAを作成します。 勉強しながらなので、間違っている箇所もあるかと思いますがご了承ください。作成するものは、ハイ…

【Vue.js】親Componentのデータ値を子Componentで変更する【$emit】

今回はVue.jsで、親Componentのデータ値を子Componentで変更する方法を記載します。

【Vue.js】デフォルト要素名と重複したコンポーネント名を指定した場合

【Vue.js】デフォルト要素名と重複したコンポーネント名を指定した場合 例えば、コンポーネントの名前に「menu」とつけた場合はこんなエラーが出ます。 Do not use built-in or reserved HTML elements as component id: menu 要するに、「デフォルトの要素…

【Vue.js】component要素を使って画面切り替え【VueRouterを使わない】

【Vue.js】component要素を使って画面切り替え【VueRouterを使わない】今回はVueRouterを使わないで、画面を切り替える方法として、component要素を使ってます。