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

使用 Axios 取得 API

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

const { onMounted } = Vue;
const app = {
  setup() {
    onMounted(() => {
      // 在DOM元素渲染完成後執行
      axios
        .get("https://vue-lessons-api.herokuapp.com/photo/list")
        .then((res) => {
          console.log(res.data);
        });
    });
    return {};
  },
};

VUE 的生命週期(Lifecycle Hooks)

setup => vue 掛載到 app 上面後執行
onBeforeMount => DOM 渲染前執行
onMounted => DOM 渲染完成後執行
onBeforeUpdate => 資料更新 DOM 更改前執行
onUpdated => 資料更新 DOM 更改後執行

computed

範例 1: 自動長出 menu 高度

計算屬性

1
2
3
4

<a @click="HandListShow" class="title">菜單</a>
<ul class="box" :style="{height: toggleH}">
  <li v-for="(list, idx) in listArr" :key="list">{{list.name}}</li>
</ul>

vue.js 的起手式

1

<script src="https://unpkg.com/vue@next"></script>

1
2
3
4

<div id="app">
  <h1>{{msg}}</h1>
  <button @click="handAddInt">Add</button>
</div>

Node.js 更新

mac

1
2
3
4
5
6

npm cache clean -f
npm install -g n
// 若要更新到最後一個版本
n latest
// 若要更新到穩定版本
n stable