Twitter liteを初めて触ったときからPWAに憧れていたのでついにやってみた。 PWA化のためにやったこと 参考 michimani.net "dependencies": { "core-js": "^2.6.5", "firebase": "^6.6.1", "vue": "^2.6.10", "vuetify": "^2.0.0", + "register-service-work…

vue-pokedex-89790.firebaseapp.com タイプ絞り込みボタンと名前検索を実装してみました。 テンプレート <v-layout class="row"> <div v-for="type in types" v-bind:key="type.index"> <v-btn @click="selectType=type">{{type}}</v-btn> </div> </v-layout> <v-text-field v-model="keyword" label="ポケモンの名前を入れてね" ></v-text-field>

リアクティブなCSSを試したくて各カードに色をつけてみました。 まだ見栄えは悪いですが、その過程でv-bindを使ったクラスの切り替えができたのでメモ。 <v-card-title :class="titleClass">{{Pokemon.no}}:{{Pokemon.name}}</v-card-title> data() { return { titleClass: "", } }, created() { this.titleCls…

vue-pokedex-89790.firebaseapp.com 3連休だったのでVue.jsの勉強もかねてこんなの作りました。 Vue.jsのポケモン図鑑です。 データ データソースは古都ことさん(@kfurumiya)が公開しているpokemon_data.jsonです。 github.com 構成 Vue.js + UIフレームワー…

www.katonobo.com この記事を見てすごく手軽に環境が作れそうだったのでやってみた。 準備 Node.jsのインストール Chocolateyを使ってさくさくっと。 最新のLTSをインストール。 choco install nvm -y nvm install 10.16.3 Vue,jsのインストール npm install…