プログラミング逆引き辞典

～多言語対応のプログラミングレシピ～

Vue.js（シンプルな構文）

■双方データバインディングが可能なVue.jsのシンプルな構文を解説する

①HTMLファイル等に公式サイトから取得した開発用のスクリプトを記述

公式サイトはこちら→href=”https://vuejs.org/


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

※本番環境の場合は下記を記述


<script src="https://cdn.jsdelivr.net/npm/vue"></script>

②実際の記述例
・index.html


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.js</title>
  </head>
  <body>
    <div id="app">
      <!-- main.jsのdataに記述した「name」を大文字で表示 -->
      <p>{{ name.toUpperCase() }}</p>
      <!-- main.jsのdataに記述した「age」を表示 -->
      <p>{{ age }}</p>

      <!-- 「v-model」でmain.jsのdataに記述した「name」をinput属性に紐づけ-->
      <input type="text" v-model="name">
      <!-- 「v-model」でmain.jsのdataに記述した「age」をinput属性に紐づけ-->
      <input type="text" v-model="age">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/main.js"></script>
  </body>
</html>

・main.js


'use strict';

//即時アロー関数で記述している
(() => {
  //「Vue」のインスタンスを作成
  let vm = new Vue({
    //変数「el」に「app」というid要素をセット
    el: '#app',
    //「data」に値を設定
    data: {
      name: 'tanaka',
      age: 23
    }
  });
})();

下記のように表示される

双方データバインディングが可能なのでinput要素の値を変更するとp要素の値も変更される