2020軽量JSフレームワークとして有名なVue.js。最近、Laravelに触れる機会が増えたことと、以前からRailsVueという構築を耳にするので、今更ではありますが勉強を始めようと思います。今回は基本文法に関してメモしていきます。同じオプションを受け入れます。ようなルート固有のオプションです。Router"、"axios"を使った、SPAの作り方を紹介します。Vue.jsはVueクラスのインスタンスを作成するところからすべてが始まります。この構成要素として、もっとも重要なものは以下3点になります。el:対象となるHTML要素。項目を数えて表示する」に改訂しました。こんにちは、ほそ道です。今回も引き続きVue.jsのディレクティブを体で覚えます。GASとVue.jsを使ってWebアプリケーションを作成する方法をお伝えしています。データバインディングの一般的な必要性は、要素のクラスリストとそのインラインスタイルを操作することです。Vue.jsで色々書き方のルールがあるようで、備忘録として実際に使ったものをここにまとめていきます。最初は少ないですが随時追加していく予定です。絵にするとこんな感じ。v-modelを多用しているとわかりにくいですが、完全な双方向バインディングではなく一方通行のデータの流れが見えてきます。Vueで管理画面のようなものを作成しています。その時、条件に一致していない場合は非アクティブ(押せない状態、disabled)にしたいと思っています。activeクラスが有効になり、falseであれば無効になります。コンポーネントとして使う方法を書いた記事です。コンポーネントを書く際に必要なノウハウなども流れの中で書いています。.Vue.jsにおいてHTML要素の属性に対してデータバインディングするには、v-bindディレクティブを利用します。スタイルと同様に複数のクラスを適用するには、配列を利用します(23行目)。.Vue.jsで動的条件を満たす場合にクラスを割り当てる方法として、v-bind:classがありますv-bindは省略可能。動的に割り当てるパターンとしては色々考えられますよね。単純にある条件を満たした時にクラスを割り当てるパターン、条件A.Vue.jsの続きです。前回まではJSONファイルの読み込みをしました。今回は属性値の動的な変更をします。v-bindを使ってclass名の追加、削除を行います。jsの扱いを受けますので、「-」など変数名で扱えないものは、文字列のハッシュ値として扱います。下記のようなことになります。ベースのテンプレートの実装を使用しています。解析可能になるということを意味します。対してこの要素への変換を適用することを知らせます。生成メソッドが呼ばれたときに適用されます。します.Vue.jsの「v-if」を要素に指定すると、条件分岐させることができます。trueで表示、falseで非表示です。感覚的にできていいですね。表示・非表示の際にCSSで効果をつけてもいいですね。