單頁式應用

single-page application，縮寫 SPA
透過 JS 動態渲染當前頁面來與使用者互動，而非傳統的從伺服器重新載入整個新頁面。這種方法避免了頁面之間切換打斷用戶體驗，使應用程式更像一個桌面應用程式。

router-view

將會改變的區塊使用 router-view 顯示

Slot 插槽

在子元件上面開個洞， 由外層元件將內容置放在至子層元件指定的位置中
可解決樣式一樣，但內容不一樣的組件

全局 directive

透過 directive 可以讓每頁都使用共用語法，在 main.js 中添加全局 directive
directive mounted 生命週期等同於 onMounted, 但這裡為純 js 並非 vue 的週期裡，所以這樣使用

透過 ref 綁定，取得 DOM 元素

1
2
3
4
5
6
7
8
9
10
11
12

import { onMounted, ref } from "vue";
export default {
  setup() {
    const inputText = ref(null); // 變數需跟綁定的ref一樣名稱
    onMounted(() => {
      inputText.value.focus(); // 回傳後即可使用inputText
    });
    return {
      inputText, // 回傳inputText
    };
  },
};

$event 事件回傳

取得事件的 target

1
2
3
4
5
6
7
8
9
10

export default {
  setup() {
    const clickFn = (e) => {
      console.log(e.target);
    };
    return {
      clickFn,
    };
  },
};

Enter & Leave Transitions

Vue.js 將過場漸變的效果包裝成一個獨立的 transition 元件， 再由開發者自行定義元素的進場 (Enter) 、退場 (Leave) 以及動畫過程漸變 (Transitions) 的樣式。動畫執行完後才會把 DOM 元素拔掉

組件資料傳遞 emit (子傳父)

使用 emit 往上傳遞資料

組件資料傳遞 Props (父傳子)

上層的 data 透過 props 往下傳，不會往上傳回 data，所以下層的資料改變不會影響到上層(data)

App.vue

1
2
3
4
5
6
7
8
9
10
11

import PropsTest from "@/components/PropsTest.vue";
import { ref } from "vue";
export default {
  components: {
    PropsTest,
  },
  setup() {
    const data = ref("hello Vue!");
    return { data };
  },
};

1

<PropsTest :msg="data" /> // :子層屬性="父層 data"

組件基本介紹

main.js

1
2
3
4
5

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

Node.js 環境建置

下載 NVM

nvm 是 Node.js 的版本管理器 (version manager)，可在同一台主機上安裝多個版本的 Node.js 環境，因為不同專案可能會使用不同的 Node.js 版本，那就需要透過一個版本管理器來切換不同的 Node.js 版本。

NVM install - 點選右邊的 releases
https://github.com/coreybutler/nvm-windows