SIerだけど技術やりたいブログ

5年目のSIerのブログです

js

Vuejs APIアクセスはcreatedとmountedのどちらで行う?

created と mounted はざっくりした理解だと、こんな感じ。 created インスタンスの初期化が済んで props や computed にアクセスできる状態 mounted created + DOMにアクセスできる状態 APIアクセスは created と mounted のどちらで行う? APIアクセスはほ…

Vuejs Axiosで共通的な例外をあつかう

Vuejsと一緒に利用されることが多いHTTPクライアントライブラリのAxiosでは、interceptorsの仕組みを利用することでレスポンスに関する共通的な処理をはさみこめる。これを利用してVuejsで共通的な例外をあつかう。Axios interceptors GitHub - axios/axios:…

Vuejs利用時に <button type="reset"> は使わないほうがいい

button type="reset"とは? HTMLのButtonのひとつで、Formを自動でクリアしてくれるやつ。 button 要素 - HTML | MDN <html> <body> <form> <input type="text" placeholder="username" /> <input type="password" placeholder="password" /> <button type="reset">reset</button> </form> </body> </html> resetボタンをクリックするとFormが自動でクリ…

Vuejs URL切り替え時のコンポーネントライフサイクルについて

vue-routerのリファレンスに以下の記述がある。動的ルートマッチング · vue-router ルートのパラメーターを使う際に特筆すべき点は、ユーザーが /user/foo から /user/bar へ遷移するときに同じコンポーネントインスタンスが再利用されるということです。 両…

Vuejs formタグ内のテキストフィールドでEnter押下時に、メソッドを実行する

SPAの場合はformタグに任せてデータをPOSTすることは稀で、通常は自身で定義したハンドラを呼び出してAjax通信を行う。以下は、ボタン押下時にexecメソッドを実行する例。 <template> <form> <input type="text" placeholder="username" /> <input type="text" placeholder="password" /> <button type="submit" @click="exec">submit</button> </form> </template> <script> export default { name…

Vuej.sでSPAを実現するときは注意してsetIntervalを使おう

setIntervalとは 一定の遅延間隔を置いて関数を繰り返し実行したいときに利用する。例えばポーリング。 developer.mozilla.org1秒ごとにコンソール出力する例。 <html lang="ja"> <script> window.setInterval(function(){ console.log("polling"); }, 1000); </script> <body> </body> </html> setIntervalの生存…

Vuejsでdataプロパティに値を動的に追加する方法(といいつつJSの基本を理解してなかったという話)

Vuejsのバージョン この記事はVuejs v2.3.3 で動作確認をしました。 ... "dependencies": { "vue": "^2.3.3", "vue-router": "^2.6.0" }, ... Vuejsのdataプロパティ Vuejsはdataオブジェクトのプロパティをリアクティブな値として扱う。つまり、dataオブジ…