ブラウザだけで動作する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のサンプルは、以下になります。