vue響應式基礎

hjy1995發表於2024-11-23
Vue

用 data 選項來宣告元件的響應式狀態。此選項的值應為返回一個物件的函式。此物件的所有頂層屬性都會被代理到當前元件例項 (即方法和生命週期鉤子中的 this) 上

Vue 在元件例項上暴露的內建 API 使用 $ 作為字首。它同時也為內部屬性保留 _ 字首。因此，你應該避免在頂層 data 上使用任何以這些字元作字首的屬性。

要為元件新增方法，我們需要用到 methods 選項。它應該是一個包含所有方法的物件。Vue 自動為 methods 中的方法繫結了永遠指向元件例項的 this。不應該在定義 methods 時使用箭頭函式，因為箭頭函式沒有自己的 this 上下文。

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

元件例項上的屬性、方法可以在當前元件的模板上直接使用

相關文章