Vue.jsはJavaScriptフレームワークのひとつです。JavaScriptによりページの書き換えを実現し、ユーザーの操作に応じた動的なウェブアプリケーションの開発ができます。

Hello, Vue 3

プログラミング入門書なら最初に必ずある「Hello World」をやってみます。

マスタッシュ構文とはVueの構文で使われる{{}}のことです。形状が口髭(英語ならmoustache)に似ているためこのような名前が作られました。

マスタッシュ構文はmount(‘#ex1’)としている以上、id =”ex1″のタグ内でないと効果はありません。

で、なにが便利なのか?

以下は普通のJavaScriptで書かれたコードですが、表示されるtextを変更するためにはtextの値を変更するだけではダメで、その都度innerTextにtextを設定しなければなりません。ところがvue3であれば値を変更するだけで反映されるようになるのです。

v-bindでHTMLの属性を変更する

v-bindを使えば作成した変数の値をHTMLの属性に渡すことができます。上ふたつはリンクのリンク先urlとアンカーテキストを設定しています。最後の例ではボタンの有効無効を指定しています。後述するイベント処理を使えば、これらを動的に変更することができるのです。

双方向データバインディング

双方向データバインディングとはデータあるいは対象の変更を自動的にもう一方に反映(同期)することを、双方向で実現する仕組みのことです。

普通のJavaScriptだとテキストボックス内のデータを取得して表示させようとするとテキストボックス内の文字列取得の処理とdiv要素への文字列の設定というふたつの作業が必要です。vue3はこれを自動化してくれるのです。

vue3だとテキストボックス内の文字列が変わるとすぐに変更が反映されます。テキストボックス同士の同期も可能です。

v-modelのあとに.trimをいれると前後の空白を除去した状態で同期されます。.numberなら数値のみを扱います。.lazyだと編集時にただちに同期するのではなく、フォーカスが外れたときに同期されます。

複数の属性の変更

複数の属性を同時に変更することもできます。

イベントハンドラ

最初の例は、マウスが要素内に入るとMouseEnterが、出るとMouseLeaveが呼び出され、要素内の文字列が変わるようにしています。2つ目の例はボタンをクリックするとクリックした回数が表示されます。ただし右のボタンは1回しか反応しません。3つ目の例はボタンをクリックすると文字が大きくなっていきます。