デモ

スクリプトの読み込み

まず、Vue.jsを使うためにCDNでの読みます。

1. 「vue.js cdm」と検索
   https://v2.vuejs.org/v2/guide/installation.html
2. 左側ナビ インストール > CDN
3. スクリプトをコピーし、htmlのヘッド内に読み込み

２つスクリプトがあります。

プロトタイピングまたは学習の目的の際は下記のような記述のスクリプト

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

本番環境では、新しいバージョンによる予期しない破損を避けるために、特定のバージョン番号とビルドにリンクすることをお勧めします。

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

宣言的レンダリング

Vue.js のコアは、単純なテンプレート構文を使って宣言的にデータを DOM に描画することを可能にするシステムです。

<div id="app">
    {{ message }}
</div>

    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
    app.message = 'I have changed the data!';

文字列の展開に加えて、以下のように要素の属性を束縛（バインディング）することもできます。

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

v-bind 属性はディレクティブと呼ばれています。
ここで宣言されているのは、「この要素の title 属性を Vue インスタンスの message プロパティによって更新して保存する」ということになります。

条件分岐とループ

v-if で要素の有無を切り替えます。

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

v-for ディレクティブを使えばアイテムのリストを配列内のデータを使って表示することができます。

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
app4.todos.push({ text: 'New item' })

ユーザー入力の制御

v-on ディレクティブを使ってイベントリスナを加え、Vue インスタンスのメソッドを呼び出すことができます。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Vue は入力とアプリケーションの状態の「双方向バインディング」が簡単に行える v-model ディレクティブも提供します。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

コンポーネントによる構成

独自要素を定義したり、独自属性を定義したりすることができる。

<div id="app-7">
    <h2>新しいコンポーネントを定義</h2>
    <ol>
        <todo-item
            v-for="abc in groceryList"
            v-bind:defgh="abc" 
            v-bind:key="abc.id"
        ></todo-item>
    </ol>
</div>

// 新しいコンポーネントを定義するとHTMLに<todo-item>のように独自要素を定義できるようになる
Vue.component('todo-item', {
    // HTML側で v-bind:defgh= のような記述を可能にする
    props: ['defgh'],
    // props で定義した名前が変数として使える。propsで定義したもの（今回はdefgh）が、同じ変数名で値が受け取れるようになる。
    template: '<li>{{ defgh.text }}</li>'
})
const app7 = new Vue({
    el: '#app-7',
    data: {
        groceryList: [
            { id: 0, text: 'Vegetables' },
            { id: 1, text: 'Cheese' },
            { id: 2, text: 'Whatever else humans are supposed to eat' }
        ]
    }
})