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