Jamstack web creating

BLOG

手軽に名刺替わりのホームページ制作

【Vue.js】はじめの一歩

プログラミング

本記事の対象者

・Vue.jsってどんな処理ができるの?
・どんな書き方をするの?
・3分で概要つかみたい
こういった方向けです。

Vue.jsが生まれるまでの歴史や全体の特徴はすっ飛ばし、
Vue.jsの書籍などで一番はじめに学ぶ基本処理を紹介します。

以下のインプットタグに数字を入力してみて下さい。



入力した瞬間、submitボタンのクリックなどのイベント無しで、下部にHTMLで数字が表示されましたね。

これがVue.jsが得意とする機能の1つ、データバインディングです。

インタラクティブなUXと言ったりもしますが、ユーザのアクションに対してインタラクティブ(対話的)な動作を簡単な記述で実装できます。

jsファイル内でVue.jsの記述を行っています。
Vue.jsのコマンドを有効にするには、Vue.jsライブラリをインストールする必要があります。学習用であればCDNから呼び出すだけでOKです。
→ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

jsファイル内には、document.getElementById()といったDOM指定の記述がありません。
data1やdata2と言った変数を定義しているだけです。

ではどのように、data1やdata2をHTML要素に紐づけているのでしょうか。

HTMLファイルを見てみましょう。
pタグ内に{{ data1 }}や{{ data2 }}といった記述がありすね。
これがVue.jsのテンプレートタグです。
テンプレートタグで、入力と表示をリアルタイムにつなげているわけですね。
これがデータバインディングの基本です。


Vue.jsで一番初めに学ぶ機能を紹介しました。

それでは、今回は以上です。

ご相談・お見積・お問い合せはお気軽にご連絡ください。

Bubekiti

お問い合わせ