eijiコメントはこの投稿ではオフになっています。Vue.jsの特徴Vue.jsは、ビューだけを取り扱うシンプルなライブラリで、DOM要素にバインディング指定することで、データ変更を検出する度に、DOM要素が表示内容を自動で更新する「リアクティブなデータバインディング」を提供する。したがって、値を都度算出したり、その値を設定するコードが不要。反対に、ユーザからの入力を検出する度にJavascriptのデータを更新することもできる。Vue.jsは、フレームワークはどんな規模でも段階的に柔軟に使えるべきであるという、ブログレッシブフレームワークの思想を基に開発されており、ライブラリを導入するなどすることで、規模や要求に応じた対応が可能である。Javascript)なコンポーネントを単一ファイルに記述できるために非常に学習コストが低い。Vue.jsの基本Vue.jsは、イベントと要素との間に状態(State)を持つために、イベントとDOMとの関係を分けて考えることが可能である。UIの状態を担うJavascriptオブジェクトを中心に据え、UIの状態とJavascriptオブジェクトUIの状態とDOMツリーイベントと状態の変更の3つの視点からコンテンツを制作できる。モジュールの2つの役割を持つ。以下のプロパティを指定することができる。用いて、マウント対象の要素を指定する。Vueの影響範囲は、このマウントした要素とその子要素に限られる。Vue({})vm.$mount('#app')また、これらのプロパティにアクセスするためのインスタンスプロパティが用意されている。インスタンスプロパティを参照のこと。ルートDOMUIデータの定義dataプロパティを用いて、データのオブジェクトを指定する。dataプロパティで規定したデータは、更新毎に表示も変化する。この値をHTML上に反映させるためには以下のように記述する。Vueインスタンスの変数名は、ViewModelの略として、慣例的にvmをよく使用する。ディレクティブを使用する。dataプロパティにはデータのみを置き、値の処理を行う関数などは、methodsプロパティやcomputedプロパティに記載する。$watchメソッドは、Vueインスタンスの変更を検知し動作を開始するため、デバッグ等に利用できる。引数に監視対象の値、第二引数に値が変更した際に事項する処理内容を規定します。this.key},function(){}テンプレートVue.jsは、データとDOMツリーの関係を定義するテンプレート機能を提供しており、Mustache記法によるデータ展開とディレクティブによるHTML要素の拡張を行うことができる。指定することができる。Vue.jsを参照のこと。データ展開v-bindを利用して、属性プロパティに値を適用することができる。v-bind:属性名="dataのkey"文字列だけではなく真偽値を適用して、表示を変更することもできる。属性名を角括弧で囲うことで、属性名を変数名として定義することもできる。配列を渡すこともできる。errorClass"]></div>フィルタfiltersプロパティは、テキストのフォーマット処理を行うことができる。関数として定義し、関数名がフィルタ処理後の変数名となる。}}と記述することで、指定した値にフィルタを適用できる。連結することもできる。算出プロパティcomputedプロパティは、派生したデータをプロパティとして公開する仕組みで、データに処理を加えたいときに使用する。Vue.jsを参照のこと。}})</script>算出プロパティも依存しちえるデータが更新されれば、自動的に更新される。算出プロパティは、算出対象の変数などの依存関係が更新されたときのみ再実行されるのに対して、メソッドは、再描画が発生する度に実行される。算出プロパティは、通常getterのみ提供されているが、別途setterを定義することもできる。ディレクティブHTMLに対してディレクティブと呼ばれる独自の属性を追加し、DOMの操作を行うことができる。条件付きレンダリングv-ifおよびv-showディレクティブを用いて、これらの属性に真偽値を適用することで、要素の表示非表示を制御することができる。v-ifはDOMの追加削除自体を行うが、v-showはdisplayプロパティの変更を行って表示非表示を行う。頻繁に表示非表示が変更される場合は、v-showを使うほうがレンダリングコストが低い。v-ifディレクティブと同時に、v-else-ifディレクティブやv-elseディレクティブを使用することもできる。これらのディレクティブを使用した場合、再利用が可能な要素は描画されずにそのまま利用される。明示的に再描画を行う場合には、Key属性を追加して、Vueに別要素として認識させる必要がある。データ変更時の更新は行わずに展開を1度のみ行う場合は、v-onceディレクティブを使用することもできる。Vue.jsを参照のこと。}})</script>クラスとスタイルのバインディング特定の条件を満たしているときにUIを変更する場合は、v-bindディレクティブを使用する。v-bind:classは、指定された値のうち真のプロパティのみ、Classの属性値に反映する。下の例では、isShownは真のときのみ、error属性がClass属性に反映する。}})</script>v-bind:styleは、スタイルプロパティとして要素に反映される。v-bind:属性名は、:属性名と省略して記述することもできる。Vue.jsを参照のこと。リストレンダリングv-forディレクティブを用いることで、配列もしくはオブジェクトデータを繰り返して表示できる。v-forは、v-bindと共に使用して、v-bindで一意なキーを与えなければならない。配列"また、v-forディレクティブは、オブジェクトのプロパティに対しても使用することができる。このとき、オブジェクトの値(Value)だけでなく、キー(key)およびインデックス(index)を指定することもできる。reverse()などの変更メソッドがあらかじめ用意されている。Vue.jsを参照のこと。イベントハンドリングv-onディレクティブを持ちることで、イベントの発生の検知と検知時の実行する動作を記述することができる。v-on:イベント名は、@イベント名と省略して記述することもできる。v-on:イベント名="式として実行したい属性名"また、v-onディレクティブとv-bindディレクティブを、v-modelディレクティブとして記述することもできる。これは、DOMで変更があった場合に、その値をVueに反映できるディレクティブである。Vue.jsを参照のこと。ライフサイクルフックVueにはライフサイクルが規定されていて、それぞれの状態に変化した際に、ライフサイクルフックを用いて処理を実行することができる。Vue.jsを参照のこと。メソッドmethodsディレクティブを用いることで、Vue内のメソッドを定義することができる。v-onディレクティブにメソッド名を指定して、ボタンクリック等のイベント時に処理をするなどが考えられる。呼び出し元からeventオブジェクトが渡される。用いることで、イベントを停止したりイベントの伝搬を停止することができる。これらのメソッドを使用することで複雑な処理となることを避けるために、イベント修飾子を提供している。event.targetが自分自身の場合のみ呼び出し.once.passiveキー修飾子キーボードイベントをサブスクライブするにあたって、処理を容易にするために、キー修飾子も用意されている。Vue.jsを参照のこと。(1)アーカイブ2020年2月2020年1月2019年12月2019年11月2019年10月2019年9月2019年8月2019年4月2019年3月2019年2月2019年1月2018年12月2018年11月2018年4月2017年4月2016年12月2016年11月2016年10月2016年8月2016年5月2016年4月2016年3月2016年1月2015年12月2015年11月2015年10月2015年9月2015年5月2015年4月2015年2月2012年5月2012年4月2011年6月メタ情報ログイン投稿フィードコメントフィードWordPress.org。