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