skillup

技術ブログ

JavaScript

vueに関する小ネタ(computed、v-classなど)

投稿日:

先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。

computed

主に、vuex系のデータの同期(とでも言えばいいのか)やバリデーションやデータ出力、整形、計算などで使います。

ライフライクルに注意で、createdより後、mountedよりは前です。

Vueライフサイクルの盲点、computedの一発目の発火はmountedより早い

Vue.jsの便利な機能coumptedとは?

v-class

出勤日を出力するシステムで、土日の色を変えたいなどの時に使用。

関数を直接埋め込んで、CSSを変えたりできそうです。
html

js

上記の場合、それぞれ条件分岐でtrueになった時にclassが有効になります。

https://jp.vuejs.org/v2/guide/class-and-style.html

ajaxのasync:false

以前もasync:falseに関する記事を書きました。

ajaxのasync:falseと複数DBのjoinに関して

今回もパターンは同じですが、

ローディング画面開始

ajax処理

ローディング画面終了

というような処理を書きましたがajaxで async:false を設定しており、ローディングが正常に機能しませんでした。どうやらブラウザがロックされるため、vueのレンダリングにも影響を与えているようです。

async:false を使いたい場面などはそんなにないと思いますので、 aysnc:true にして回避。

他参考リンク

async:false とは何か。或いは、非同期処理を諦めるのはまだ早い!

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

JavaScriptのcall,bind+npmからのライブラリ読み込みで

npmを使ってライブラリ管理をする場合、個別にライブラリを読み込まず、package.jsonで読み込んだあと、一括してライブラリを読みこむことが一般的です。 で、その時の処理に関して。 例えばlea …

no image

Angular複数ファイルでの読み込み

Angularでいろいろな処理を書いているんですが、処理が膨らんでくると1つのファイルに全ての処理を書いていては当然非効率になります。 ざっくり分けると ほとんどの処理に共通な処理を集めたファイル 特 …

no image

switch(true)イディオム

switch文は通常、文字や数字で分岐をさせることが多いですが、実は条件式を入れることも可能です。 私の場合、正規表現を動的に変えたいケースがあり、検索したところ似たケースがありました。 http:/ …

no image

ejsのテンプレート

普段生のHTMLを書く機会はほとんどなく、画面側の仕事でもフレームワークを使うことがほとんどなので搭載されているテンプレートを使っています。 で、生のHTML/CSSの本を読んでいてejsなるテンプレ …

no image

cssフレームワークをnode_modulesから読み込む+cssの拡張

JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。 流れを言うと、下記のようになりま …