ップページに戻る

Vue.jsの使い方

Vue.jsの特徴

• コンポーネント指向のJavascriptフレームワーク
• HTMLの要素と変数をbindできる

このため、多くの変数を扱う科学計算のWebアプリに使うと、コードをコンパクトにできます。

プログラム例：

• Schottky Diode Parameters Calculator (component version)
• PN Junction Parameters Calculator (component version)
• FET Characteristics Calculator (component version)
• FET Characteristics Calculator
• Electronic Properties Calculator
• Photon Property Calculator

変数定義と参照:

• Vueオブジェクトの変数はdataオブジェクト内で定義する
• その他の変数はJavascriptのconst, let宣言で定義する
• テンプレートでは{{ 変数名 }}で参照できる
• {{ 変数名 }}ではHTMLタグは解釈されない (XSS(クロスサイトスクリプティング)攻撃に対して安全)。
  <span v-html="unit"></span>を使うことで、unit変数のHTMLタグを解釈して出力する（XSS攻撃に対して注意が必要）。
• Vueオブジェクトのメンバ関数内では this.変数名 で参照できる

リアルタイム更新:

• v-model を使用すると、フォーム要素と変数がリアルタイムで同期し、依存する他の要素も自動的に更新される。
• <input>要素などで @blur修飾子:を使うと、入力が完了しフォーカスが外れたときに指定した関数を呼び出すことができる。
• 他に@changeや@inputなどのイベント修飾子も用途によって使える。

Vueオブジェクトのmethods:

1. 再利用可能なロジック（つまり、普通の関数）を定義する
2. 関数が呼び出されるたびに実行され、そのたびに結果が計算される
3. ユーザーのアクション（クリックや入力など）に対するイベントハンドラや状態を変更する処理などに使用

Vueオブジェクトのcomputed:

• 依存する変数が更新された際に、自動的に呼び出される
• 自動的にキャッシュされるので、データが変更されたときだけ再評価される
• 通常の関数のように意図的に呼び出されることは無い
• {{computed関数名}}で参照できる

Vueオブジェクトのmounted():

• Vueの設置が終わった時点で呼び出されるので、ページの初期化ができる

コンポーネント指向:

• 例えば、
  Vue.component('input-field', {
    props: ['label', 'unit', 'value'],
  template: `
  <div class="input-container">
  <label>{{ label }}:</label>&nbsp;
  <input type="text" :value="localValue" @input="handleInput" @blur="handleBlur">&nbsp;<span v-html="unit"></span>
  </div>
  `,
    --cut--
  });
  というコンポーネントを作ると、
  <input-field label="Defect Density (Dit)" unit="m^-2/eV" :value.sync="Dit" @blur="updateResults"></input-field>
  などでHTML要素を作り、templateを置換して出力する。