Vue 初體驗 | 點燈坊

以經典的 counter 展示 Vue 的 Options API 風格寫法。

Version

Vue 2.7

Options API

<template>
  <div>
    <button @click="onClick">+</button>
    <span>{{ count }}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    count: 0,
  }),
  methods: {
    onClick() {
      this.count++
    },
  },
}
</script>

Line 11

data: () => ({
  count: 0,
}),

• 在 data 下宣告 count state

Line 14

methods: {
  onClick() {
    this.count++
  },
},

• 在 methods 下宣告 onClick method
• 在 method 內使用 this 存取 state，類似於 OOP

Conclusion

• Vue 的 Options API 很像 JSON 與 OOP 的混合體，寫起來相當直覺，這也是為什麼 Vue 受歡迎的原因