首先，我們要先來了解Vue Router在幹嘛，以及為什麼會需要Vue Router~



我們先來講講為什麼需要他~


使用者在操作網頁時，上方通常會有導覽列，點擊不同的項目就會切換到不同的頁面。在 Vue 這種單頁應用（SPA）中，畫面切換並不會真的重新載入整個頁面，而是動態替換顯示的內容。

職場

學習

音樂藝文

以行動支持創作者！付費即可解鎖

軟體開發

睿哲楊的沙龍

檔案

執行

了解Vue Router、pinia

先來了解Vue的生命週期的規律跟意思。

我們先來看Vue 的生命週期階段:

setup() :
宣告 reactive / ref、注入 store，設定所有初始能量。→ 此時元件尚未渲染，但狀態樹已生成。

說白一點:

發生時機：元件「剛被建立」，但 DOM 還沒出現

適合做：初始化資料、

生命

監聽

記憶體

認識Vue裡的生命週期

那我們先來了解什麼是認識Vue裡的模板引用?

模板引用的意思是:允許我們在Vue的組件的模板中標記一個DOM元素或子組件，並在setup選項中去訪問它。

我們可以說白一點就是:我們在template 裡先幫某個 DOM 元素或子元件貼上一個「名字」，等畫面真的被渲染出來後，就可以在 <scrip

名字

認識Vue裡的模板引用



在開始前我們先講解響應式函數，響應式函數就是

import { ref, watch } from 'vue'

const count = ref(0)
1      2       3  4



宣告一個常數，可以讓我們後續使用。

為這個常數賦予名稱。

響應式函數並接收一個參數初始值

數據

認識vue裡的ref、watch、computed、reactive

npm:

npm是一個 Node.js 預設的 JavaScript 套件管理工具，它幫助開發者下載、安裝、管理和分享專案所需的程式碼套件，也可想像成JavaScript 的「套件管理員」。

主要在做:

安裝套件（例如 axios、react…）

管理版本（你裝的是哪一版、依賴哪些東西）



安裝

管理

專案

管理員

版本

了解npm、package、axios

首先callback hell

callback hell叫做'回呼地獄'，是指在處理多個相依的非同步操作時，過度巢狀使用回呼函數（callback functions）導致程式碼變得難以閱讀、理解和維護，形成金字塔形的縮排結構，也稱作「金字塔地獄」（Pyramid of Doom）。

例如:


投資理財

成功

失敗

地獄

結構

了解callback hell、Promise、async/await

首先我們要先了解非同步 & 同步!

我們先講同步:

同步的意思是說，我們正常的程式碼都是一行一行做，如果前一行的程式碼沒有做完，下一行就不能做，說白一點就是一件事情沒做完，下一件事情就不能做。

範例：

function step1() {
  console.log("第一步")
}

fu

程式

計時器

了解非同步 & 同步、call back queue、call stack、web api


字串 String：

字串（String）是一連串字元組成的序列，是程式設計中表示和處理文字資料的基礎類型，可由字母、數字、符號或空格組成，通常用雙引號括起來，而字串最常出現的地方：表單輸入、搜尋、顯示文案、格式化資料（電話/日期/金額）、做驗證（是否空白、長度、是否含特定字）。



取得長度：

新增

刪除

數字

檢查

基礎

輸入

合併

認識字串、陣列、物件的基礎操作

javascript有分兩大類型別:原始型別 (Primitive Types) 和物件型別 (Object Types)兩種，而原始型別包含string、number、boolean、null、undefined、Symbol，物件型別則是包含陣列、函式、日期等。



這次我們來了解原始型別:


認識javascript type

var : var的作用域是屬於"函式作用域(Function Scope)"意思是當我們在一個函數內部用 var 宣告變數時，變數只在該函數內部可見，是可以被重複宣告的，是使用在變數可能或不會被重新賦予值，或者宣告範圍在整個函式(function)或者區塊(block)中，但是跟let相比之下，比