Vue.jsの基礎

Vue.jsの基礎

Vue.jsとは

Vue.jsとは、JavaScriptフレームワークの1つで、フレームワークです。
シングルアプリケーション（SPA）開発に適しているとも言われています。

Vue.jsの基本的な機能

データバインディング

Vue.jsでは、値とHTML要素を簡単に関連付けることができます。例えば、次のコードでは、message の値をHTMLに表示することができます。

  <div id="app">
    <p>{{ message }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  });
  </script>

イベントハンドリング

v-on ディレクティブを使ってJavaScriptのaddEventListenerメソッドと似た動作が可能です。例では、次のコードで対象の要素をクリックした時にアラート表示をさせることが可能です。

  <div id="app">
    <button @click="handleClick">クリック</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
  new Vue({
    el: '#app',
    methods: {
      handleClick() {
        alert('ボタンがクリックされました');
      }
    }
  });
  </script>

フォーム入力と双方向データバインディング

v-modelディレクティブを使うと、フォームの入力値とVue.jsのデータがリアルタイムに同期され表示されます。例では、次のコードでフォームに入力した値をフォームの下に表示させられます。

<div id="app">
  <input v-model="inputValue" type="text">
  <p>入力値: {{ inputValue }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      inputValue: ''
    }
  });
</script>

さいごに

簡単にざっくりではありますが、Vue.jsについて触れてみました。
特にフォーム入力と双方向データバインディングを応用するとリアルタイムバリデーションも実装可能になることを知りました。
日々、新しい知識を取り込み、試していますがVue.jsなど使いこなせばアプリケーションやWebサイトの開発の時間がぐっと短縮できるライブラリやフレームワークはまだまだたくさんあります。
使いこなすためにも基本的な知識も必須なのでこれからもまだまだ頑張ります！

参考