Vue——方法（methods）

我們用 methods 選項向組件實例添加方法，它應該是一個包含所需方法的對象：

<div id="app"></div>

<script>

    const app = Vue.createApp({
        data() {
            return {count: 4}
        },
        methods: {
            increment() {
                // `this` 指向該組件實例
                this.count++
            }
        }
    })

    const vm = app.mount('#app')
    console.log(vm.data)
    console.log(vm.count) // => 4
    vm.increment()
    console.log(vm.count) // => 5

</script>

　　

Vue 自動為 methods 綁定 this，以便於它始終指向組件實例。這將確保方法在用作事件監聽或回調時保持正確的 this 指向。在定義 methods 時應避免使用箭頭函數，因為這會阻止 Vue 綁定恰當的 this 指向。

這些 methods 和組件實例的其它所有 property 一樣可以在組件的模板中被訪問。在模板中，它們通常被當做事件監聽使用：

 <button @click="increment">Up vote </button> {{count}}

　　

在上面的例子中，點擊 <button> 時，會調用 increment 方法。

 

 

1. 基本都是使用@事件名來進行事件的綁定
   語法：
      <h1 @click="num++">{{num}}</h1>

2. 綁定的事件的事件名，全部都是js的事件名：
   @submit   --->  onsubmit
   @focus    --->  onfocus
   @blur     --->  onblur
   @click    --->  onclick