Vue.jsのWebページでWijmoのコントロールを利用
Vue.jsのWebページでWijmoのコントロールを利用する方法を、図2のサンプルで説明します。このサンプルでは、Wijmoのゲージコントロール（LinearGauge）と、ゲージの値を設定するテキストボックスが表示されます。ゲージはマウスやタッチで、テキストボックスは数字入力で値を変更でき、ゲージとテキストボックスで相互に変更が反映されます。
実装方法を以下で説明します。最初に、Vue CLIで生成したプロジェクトのフォルダーでリスト5のコマンドを実行して、Node.jsのパッケージマネージャーnpmから、プロジェクトにWijmoを追加します。
npm install @grapecity/wijmo.vue2.all
次に、App.vueにリスト6の内容を実装します。
<template><!-- テンプレート ...（1）-->
<div>
<h1>Wijmo + Vue.js（ゲージ）</h1>
<!-- WijmoのLinearGauge ...（1a）-->
<wj-linear-gauge
:is-read-only="false"
:value="gaugeValue"
:value-changed="onValueChanged"
class="wijmo-control"
></wj-linear-gauge>
<!-- テキストボックス ...（1b）-->
ゲージの値：<input v-model.number="gaugeValue">
</div>
</template>
<script><!-- ロジック ...（2）-->
// Wijmoをインポート ...（2a）
import '@grapecity/wijmo.vue2.gauge'; // ゲージ
import '@grapecity/wijmo.cultures/wijmo.culture.ja'; // 日本語カルチャ
import '@grapecity/wijmo.styles/wijmo.css'; // スタイル
export default { // コンポーネント実装 ...（2b）
data() { // データの設定 ...（2c）
return {
gaugeValue: 30 // ゲージの初期値 ...（2d）
};
},
methods: { // メソッド群の実装 ...（2e）
onValueChanged(s) { // ゲージ変更時の処理 ...（2f）
this.gaugeValue = s.value;
}
}
};
</script>
<style><!-- スタイル ...（3）-->
.wijmo-control {
width: 400px;
margin-bottom: 20px;
}
</style>
Vue.jsのコンポーネントに対応する*.vueファイルには、（1）の<template>タグ内に表示内容のテンプレート、（2）の<script>タグ内にロジック、（3）の<style>タグ内にスタイルを、それぞれ記述します。以下で、それぞれの記述内容を説明します。
コンポーネントのテンプレートを記述する<template>
<template>タグ内には、コンポーネントの表示内容を表すテンプレートを、HTMLタグ形式で記述します。（1a）の<wj-linear-gauge>タグが、WijmoのLinearGaugeに対応する記述です。Wijmoコントロールのタグ名は、「wj」という接頭辞で始まり、英小文字とハイフン区切り文字からなるコントロール名が続きます。
ここでは、<wj-linear-gauge>に表2の属性を設定しています。
| 属性名 | 属性の意味 | 設定内容 |
|---|---|---|
| :is-read-only | 読み取り専用かどうか | false（操作可能） |
| :value | ゲージの値 | gaugeValue変数 |
| :value-changed | ゲージ変更時の処理 | onValueChangedメソッド |
| class | CSSのクラス | 「wijmo-control」 |
属性名の前のコロンは、属性値がJavaScript式として解釈されることを示します。例えば「:is-read-only="false"」は、is-read-only属性にfalseという（JavaScriptの）値を設定します。また、「:value="gaugeValue"」は、value属性にgaugeValue変数（詳細は後述）の値を設定します。
（1b）はテキストボックスです。「v-model.number="gaugeValue"」はVue.jsで双方向データバインディングを指定する記述で、gaugeValue変数の値とテキストボックスの内容が双方向に同期するようになります。「.number」は、入力値を数値として扱う記述です。
［補足］Vue.jsのv-bindとv-model
属性名の前にコロンをつけた「:value」記述は、「v-bind:value」を省略したものです。v-bindは、v-model同様データバインディングの記述ですが、v-modelと異なり、データの伝達が一方向です。ゲージの値を表す「:value」の場合、gaugeValue変数の値はゲージに反映されますが、ゲージの変更はgaugeValue変数に反映されません。そのため、:value-changedに設定したゲージ変更時の処理で、gaugeValue変数を明示的に更新する必要があります。
コンポーネントのロジックを記述する<script>
<script>タグ内には、コンポーネントのロジック（変数や処理）を、JavaScriptで記述します。
（2a）で、Wijmoをインポートします。ここではLinearGaugeなどゲージのコントロールを含むwijmo.vue2.gaugeをインポートしています。Wijmoの利用時はこのほかに、日本語に対応させるためのカルチャwijmo.culture.jaと、スタイルファイルwijmo.cssをインポートする必要があります。
（2b）がコンポーネントの実装です。data関数（2c）はコンポーネントが保有する変数を返却する関数で、ここでは（2d）で、ゲージの値を表すgaugeValue変数に初期値を設定しています。コンポーネントのメソッドはmethods（2e）に記述します。ここではゲージ変更時の処理をonValueChangedメソッド（2f）で実装します。このメソッドでは、イベント変数sのvalueプロパティからゲージの値を取得して、gaugeValue変数に設定します。
コンポーネントのスタイルを記述する<style>
<style>タグ内には、コンポーネントの表示を調整するスタイルを、CSSで記述します。ここでは、ゲージに設定したCSSクラスwijmo-controlに、幅とマージンを設定しています。
