ブラウザだけで動作するVue 2のサンプル

サンプル

Vue 2のサンプルは、このページになります。 また、このソースは以下になります。 これはVue 3ではエラーが発生します。 

<!DOCTYPE html>
<html>

<head>
    <title>Vue2のテスト</title>
    <script src="https://unpkg.com/vue@2"></script>
</head>

<body>
    <div id="app"></div>
    <div id="basic-event">
        <!-- '@click' は、'v-on:click' にすることもできる。 -->
        <button @click="counter += 1">ボタン1</button>
        <p>ボタン1のクリック数 {{ counter }} 回</p>
    </div>
    <div id="event-with-method">
        <button @click="greet">ボタン2</button>
    </div>
    <div id="multiple-event">
            <button @click="one($event), two($event)">ボタン3 (+3)</button>
            <p>ボタン3のクリック数 {{ counter }} 回。 合計は {{ sum }}</p>
        </div>

    <script>
        const app = new Vue({
            template: '<p>{{msg}}</p>',
            data: { msg: 'これはVue2のテストです。' }
        });
        app.$mount('#app')

        // ボタン1
        const bt1 = new Vue({
            data() {
                return {
                    counter: 0
                }
            }
        })
        bt1.$mount('#basic-event');

        // ボタン2
        const bt2 = new Vue({
            data() {
                return {
                    name: 'Vue.js'
                }
            },
            methods: {
                greet(event) {
                    // `this` inside methods points to the current active instance
                    alert('Hello ' + this.name + '!')
                    // `event` is the native DOM event
                    if (event) {
                        alert(event.target.tagName)
                    }
                }
            }
        }).$mount('#event-with-method')

        // ボタン3: Multiple Event Handlers
        new Vue({
            data() {
                return {
                    counter: 0,
                    sum: 0
                }
            },
            methods: {
                one(event) {
                    this.counter += 1;
                },
                two(event) {
                    this.sum += 3;
                }
            }
        }).$mount('#multiple-event')
    </script>
</body>

</html>

Vue 3のサンプルは、以下になります。