はじめに ミックスインを用いて各コンポーネントで記載されている同じような処理を一つの処理にまとめてみたいと思います。 ミックスイン(Mixin) ミックスインを用いると、各コンポーネントで作成している処理に同じ処理があった場合にそれらを一つにまとめ…

はじめに カスタムトランジションクラスとAnimate.cssを用いてアニメーションを実装する方法について備忘録として記載していきます。 カスタムトランジションクラス 今回利用するカスタムトランジションクラスは任意のクラス名を組み込みのトランジションク…

はじめに アプリの規模が大きくなっていくとデータの管理が大変になります。 特にVue.jsやReactなど、コンポーネント間でのデータ受け渡しが頻発するようなものではアプリが大きくなることで子要素の子要素の～子要素のデータを取得～というようにデータの利…

はじめに 以前v-htmlを用いて動的にHtmlを出力していましたが、今回はCSSを動的に出力する内容に関する備忘録です。 ※以前Htmlを動的に出力していた記事は以下です。 【Vue.js】v-htmlディレクティブを用いてHtmlを出力する。 - おーみんブログ サンプルコー…

はじめに フロントエンドにVue.jsを用いている際にHtmlを動的に出力する処理について備忘録として残します。 v-htmlディレクティブを用いる 結論から言うとv-htmlディレクティブを用いることで対応が可能です。 利用例としては以下のような感じとなります。 <template> <div v-html="testHtml"></div></template>…

はじめに 個人の勉強用アプリで要望フォームを作ってみたので備忘録として残します。 概要 大まかな操作/イメージとしては以下のような感じです。 【要望フォーム(Vue.js)】 【要望通知(AzureFunctions + LINE Messaging API)】 ユーザが上記のフォームから…

はじめに 個人の勉強用アプリで並列処理を書く機会があったので備忘録として残します。 サンプルコード 以下はAPI通信を行い、全てのレスポンスが返ったら処理を行うサンプルコードです。 レスポンスには各リクエストの結果が配列となって返ってきます。 <template> <v-container> <v-row> <v-col cols="6"></v-col></v-row></v-container></template>…

はじめに お正月休みを利用して久しぶりにVue.jsのお勉強をしたいなと思い、手取りの収入から家計黄金比を出してくれるアプリを作ってみました。 どんなアプリか 利用方法としてはとても単純で「月の手取りを入力してください」というフィールドに金額を入力…