ryu-sugi
commented
2 years ago トランジション(renaisrion)とは？(表示の切り替えを滑らかにする)
・要素に心地よい表示効果を与えたり、要素の色や大きさなどを連続的に変化させてアニメーション効果を与えたりできる機能。 → Vueは、CSSトランジションと、リアクティブデータを使ったトランジションをサポートしている。
CSSトランジション
→ CSSトランジションの本質的役割→数値で表現できる量を2つの状態間で連続的に変化させること。
・CSSのtransitionプロパティを使うと、2つの状態間のスタイルをブラウザが連続的に変化させてくれる為、簡易なアニメーションが実現できる。
→CSSトランジション用classの適用と解除をVueに任せるには、トランジションを適用したい要素を<transirion>タグで囲む。
→書式 <transition>......</transition>
class名の先頭部分を自分で指定する
・<transition name="fade">のように、<transition>要素にname属性を指定すると、先頭を「v-」ではなく「fade-」に付け替えたclass名が使えるようになる。(管理しやすくなる)
カスタムトランジションクラス(class名を自分で指定する)
・外部ライブラリを使う際に、ライブラリ側で決まっているclass名を使
続き... フォーム入力バインディング (データと入力を同期する)
制御をサポートする3つの装飾子
・v-modelディレクティブには、フォーム入力バインディングをサポートする3つの装飾子がある →書式 v-model.lazy のように使用する。
「.lazy(入力値が変わるとすぐに同期する)」
・.lazy装飾子を指定したフォームコントロールはchangeイベントが発生したタイミングでデータバインドが行われる。
「.number(入力値が変わるとすぐに同期する)」
・.number装飾子を指定したフォームコントロールは、バインドしているプロパティに数値型の値が代入される。
「.trim(余分なスペースを取り除く)」
・.trim装飾子をテキストボックスやテキストエリアにつけておくと、入力された文字列の前後に空白や改行などがついていた場合に自動的に除去してからデータに代入してくれる。