Vueの書き方の2通りの違いを教えてほしいです。
vueの書き方の違いについて教えてほしいです。
下はボタンを押したら1を足していくプログラムなのですが、この二通りの書き方の違いって何ですか？
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
{{number}}
<button @click="addNumber">ADD</button>
</div>
new Vue({
el: '#app',
data: {
number: 1
},
methods: {
addNumber() {
this.number += 2
}
}
})
と
<template>
<div>
{{number}}
<button @click="addNumber">ADD</button>
</div>
</template>
<script>
export default {
data(){
return{
number : 1
}
},
methods:{
addNumber(){
this.number += 1
}
}
}
</script>
0
