2020-12-01から1ヶ月間の記事一覧

Vuefity

Vuefity(ビューティファイ)とはVueのCSSフレームワークの一つ。CSSを使わずタグでマテリアルデザインのページを作ることができる。 CDNでの使用例(JSFiddleで確認) <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> </link></head></html>

LocalStorage

Js

ブラウザにデータを保存する仕組み。 ブラウザを閉じてもデータが保持される。 使用例(JSFiddleで動作確認) <html> <head> <meta charset="utf-8"/> <script language="javascript" type="text/javascript"> // 読込 function load() { var varinVal = ""; if(!localStorage.getItem('hogeKey')) { varinVal = "データがありません"; } else { //ローカ</meta></head></html>…

vue CLIのインストール

vue CLIをインストール～デフォルトのプロジェクト作成までの手順メモ 1.以下のサイトからnodeの推奨版をダウンロードする https://nodejs.org/ja/ 2.ダウンロードしたインストーラを実行しnodeをインストールする 3.コマンドプロンプトから以下を実行し、CL…

vue.jsでJSを別ファイルとする

Js

vue.jsでJSを別ファイルとした場合の記述例とフォルダ構成は以下の通り。 hoge.htm <html> <div id='app'> インスタンスの値を表示してみた<br> {{ name }} </div></html> <script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="src/hoge_lab.js"></script> hoge_lab.js new Vue({ el: "#app", da…

jsfiddle

Js

ブラウザ上でJavaScriptをコーディング・テスト実行できるサイト JSFiddle - Code Playground 使用例 実行環境を切り替えるとVue.jsでの動作環境を確認できる

vue.jsのサンプル

CDNで公開されているライブラリを使用したvueのサンプル以下のhtmlをローカルに保存して開くと動作します。※CDN接続なのでインターネットに接続必要があり <style>#app-hoge .error { color: red;}</style><div id="app-hoge"> 入力した値が奇数か偶数かを返します<br> <input type="text" v-model="message"> <div class="error" v-if="error.require">必須項目です。</div> </div>

PWAのオフライン動作確認

以下のサイトを元にPWA（Progressive Web Apps)の オフライン対応サイトを使ってみたのでメモ。 PWAをもっと簡単に初めてみる - Qiita インストールの仕方(ios) ①オフライン対応しているサイトを開く ②「ホーム画面に追加」を行う