Vue.js
【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】 前回 www.sky-limit-future.com mainComponent.jsの解説 part1 indexComponent 今回はホーム画面から一覧画面にリダイレクトしているので使用していません…
【Vue.js】Vue.jsとLocalStorageを使って献立管理アプリを作成 - Part1 - 【LocalStorage】 嫁が管理栄養士なのですが、「こんなアプリが欲しい」と言われたので作成しました。 内容は献立管理アプリです。 ある献立が直近で使われた日付がすぐ分かるように…
【Vue.js】Vue.jsでAjax通信(php)【axios,php】 今回はVue.jsからAjax通信でWEBAPIを呼び出し画面に反映することを目的とします。 今回はphpを使っていますが、そこは問題ではないのでphpには焦点を当てないで書いていきます。Vue.jsの公式ドキュメントで推…
Vue.jsでPWAを作ってみる - Vuexの導入 - 前回はプロジェクト作成まで実施して、実装に入ろうと考えたが、状態管理のためにVuexを導入しようと思います。 使用したPWAテンプレート（vue-pwa-boilerplate）には、Vuexがはいっていないので、導入するためには…
Vue.jsにVuexを導入して、状態管理を簡単にする 今回はVuexを学びます。 Vuexは簡単にいえば、「コンポーネント間のデータのやり取りを簡単にするもの」です。 いままで、コンポーネント間のデータのやり取りは以下の記事のようにやっていました。www.sky-li…
【Vue.js】勉強しながらVue.jsでPWAを作ってみる - プロジェクト作成 - そろそろPWAへの理解を深めないとダメだなと思ったので、Vue.jsでPWAを作成します。 勉強しながらなので、間違っている箇所もあるかと思いますがご了承ください。作成するものは、ハイ…
今回はVue.jsで、親Componentのデータ値を子Componentで変更する方法を記載します。
【Vue.js】デフォルト要素名と重複したコンポーネント名を指定した場合 例えば、コンポーネントの名前に「menu」とつけた場合はこんなエラーが出ます。 Do not use built-in or reserved HTML elements as component id: menu 要するに、「デフォルトの要素…
【Vue.js】component要素を使って画面切り替え【VueRouterを使わない】今回はVueRouterを使わないで、画面を切り替える方法として、component要素を使ってます。
【Vue.js】モーダルを使ったパスワード画面の実装【モーダル・LocalStorage・SessionStorage】 ■やりたいこと パスワードが設定されていたら入力画面を開く パスワード入力画面はsessionが残っている場合は開かない LocalStorageとSessionStorageを使用する …
Vue.jsとLocalStorageを使ってToDoアプリを作る 今回はVue.jsとLocalStorageを使ってToDoアプリを作りました。■やりたいこと Vue.jsはCDNを使用(npm上の最新) 単一ファイルコンポーネントは使用しない LocalStorageに保存する 実装内容 うまく表示されない場…
【Vue.js】Vue.jsで共通ヘッダーを作る【header】 ここではvue-cliで作成したVue.js + webpackアプリケーションで共通ヘッダーを実装する方法をご紹介しています。 vue-routerも使用しています。もととなるソースは、以下の手順で取得してきたものです。 作…
【Vue.js】Vue.jsを使ってみたAngular派(2系はろくに使ったことないから、Angular派ともいえないが)だった僕が、ついにVue.jsに手を出した。jp.vuejs.orgここに沿って、適当に触ってみた。 <html> <head> <meta charset="utf-8"> <title>Vueチュートリアル</title> <script src="https://unpkg.com/vue"></script> </head> <body> <p>テスト</p> <div id="app"> これは{{me…</div></body></html>
