https://cn.vuejs.org/

官網現在有很貼心的 toggle 切換 Composition Options API

Options vs Composition 比較

• Options API
  • 特色是vue規定好哪邊是 data, methods, computed, watch ...
  • 會寫很多 this
• Composition API
  • vue3 才出現的寫法 (vue2.7也支援)
  • 能將相關邏輯的程式寫在一起
  • 很像在寫 React
    更詳細可參閱:
    https://cn.vuejs.org/guide/extras/composition-api-faq.html

// Options API 範例
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    this.increment()
  }
}
<script/>

<template>
  Count is: {{ count }}
</template>

// Composition API 範例
<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })

    function increment() {
      state.count++
    }

    // increment 函數也要傳出去
    return {
      state,
      increment
    }
  }
}
<script/>

<template>
    <button @click="increment">
      {{ state.count }}
    </button>
</template>

語法糖寫法: 直接在 script 寫 setup

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })

function increment() {
  state.count++
}
</script>

<template>
  <button @click="increment">
    {{ state.count }}
  </button>
</template>

不斷學習

• 複習 ES6 語法
  • 解構(陣列和物件)
  • 箭頭函數
  • 物件裡面寫方法的語法糖
  • let const 使用時機
  • import 和 export
  • 以前看到人家寫 require 是什麼意思?
• index.html => main.js => App.vue 由大到小引入順序如何運作
• 先從vue2用法開始比較容易懂
• 學習 vue 基本語法
  • v-if v-else
  • v-for
  • {{ }}
  • v-bind :
  • v-on @
  • v-module
• 認識 vue 物件有哪些常用屬性
  • template
  • props
  • data
  • methods
  • computed
  • watch
• vue components 組件如何重複利用
  • 父傳子
  • 子傳父
• 學習 vue 生命週期
  • 連結
• 從 cdn 轉成 vue-cli(或是 vite) 學習專案資料夾結構
• 學習更多 vue 語法
  • .number
  • .trim
  • .stop
  • .prevent
  • .capture
  • etc
• 看看 vue3
  • ref
  • reactive
  • setup
• composables 組合式函數
  • usexxx()
  • 將將常用的邏輯和變數單獨抽出來方便重複利用
  • link
• directives 自訂義指令
  • v-xxx="..."
  • 客製化操作元素
  • link
• v-slot 插槽
  • 蟲洞傳送
  • link

其他

• vue-router 路由
• pinia 共用儲存區
• 學習更多套件的用法