六角學院 Vue.js 課程筆記（更新中）

發表於 更新於 分類於 Disqus：

本文為觀看六角學院「 Vue 出一個電商網站」的紀錄。

相關資源

建立環境

Visual Studio Code 擴充功能

vue

使 .vue 檔有高亮效果。

Vue 2 Snippets

使 .vue 檔中有自動完成片段的功能。

Preview on Web Server

按 ctrl + shift + L 讓網頁可以在 Web Server 執行。

Chrome 擴充功能

Vue Devtools

官方推薦的擴充功能，能在 Chrome 開發人員工具中看到 Vue 相關資訊，便於除錯。

安裝

可以引用 Development 或 Production 兩個版本，差異是後者無法使用 Vue Devtools ，也沒有錯誤訊息。

建立 Vue 應用程式

首先宣告一個 Vue 物件，選擇要運作的 DOM 元素，然後準備適當的資料：

1
2
3
4
5
6
let app = new Vue({
    el: '#app',
    data:{
        text: 'Hello World!',
    },
});

將資料呈現在 HTML 中：

1
2
3
<div id="app">
    {{text}}
</div>
  • 通常一頁只有一個 Vue 應用程式。
  • Vue 物件只能綁定一個 DOM 元素，所以如果用 class 綁定，只會綁定到第一個元素。
  • Vue 應用程式不能為巢狀；綁定的 DOM 元素如果在另一個 Vue 物件所綁定的對象之內，則無效。

基本架構

Vue.js 是以資料改變畫面（MVVM）。

  • data ：資料
  • methods ： function ，可以改變 data 的資料。
  • computed ： 以 function 的回傳值作為資料；當 data 被更動時，會直接觸發；通常觸發時不會改變 data 的資料。

資料量多時，用 computed 會一直在計算；用 methods 就可以控制效能。

常見指令

  • v-text
    • 類似 .textContent
  • v-html
    • 類似 .innerHtml
  • v-bind: / :
    • Vue.js 中，要在屬性的地方綁定資料的話，要將指令加在屬性前，而非在屬性內寫大括號。
    • 事實上綁定的 DOM 元素與性質（Property）。
    • 屬性（attribute）指的是 HTML 文件中，用來指定特定性質的字串，性質（Property）則是 DOM 元素所擁有的 Member 。
    • 可以應用在 class 的部分：v-bind:class="{‘className’ : 判斷式}"
  • v-model
    • 綁定輸入類的元素和資料，可以讓使用者改變資料
  • v-for
    • 用迴圈重複產生元素
  • v-if
    • 用判斷式決定元素是否顯示
  • v-on / @
    • 綁定事件
    • 事件修飾符 .prevent 可以達到 event.preventDefault() 的效果。
    • 按鍵修飾符 .enter 寫成 v-on:keyup.enter 可以綁定按 Enter 時觸發的 function 。

See the Pen Vue.js 指令 by C.L.Huang (@clhuang224) on CodePen.

表單應用

可以注意的細節：

  • checkbox 與陣列綁定
  • <select> 中不可選擇的項目可用 disabled

See the Pen Vue.js 表單應用 by C.L.Huang (@clhuang224) on CodePen.

元件化

可以在 Vue 中定義元件，並在 Vue 實體中取用。
不同的元件擁有各自獨立的資料內容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 定義元件名稱及內容
Vue.component('counter-component',{
    // 元件中的 data 是以 function 回傳物件的格式
   data: function(){
      return {
          // 元件中的變數
        counter: 0,
      }
   },
   // 元件的 HTML 樣板
   template: `
      <button class="counter" @click="counter+=1">{{counter}}</button>
   `,
});

See the Pen Vue.js 元件化 by C.L.Huang (@clhuang224) on CodePen.

實作 Todolist

  • 綁定資料
    • 新增事項：<input type=“text”> ←→ newInput
    • 勾選事項：<input type=“checkbox”> ←→ item.done
    • 編輯事項：<input type=“text”> ←→ editingInput
  • 綁定事件
    • 新增事項
      • <button> ←→ addItem()
      • <input> ←→ addItem()
    • 編輯事項
      • <button> ←→ editItem(target)
      • <input> ←→ addItem(target)
  • 綁定樣式
    • 勾選事項
      • <label :class="{‘line-through’: item.done}">

See the Pen Vue.js Todolist by C.L.Huang (@clhuang224) on CodePen.

Vue CLI

  • 基於 Webpack 所建置的開發工具
  • 便於使用第三方套件，可運行編譯工具
  • 不便於開發非 SPA 的網頁
  • 提供 GUI 介面

安裝

1
npm install @vue/cli

開啟專案

下指令之後會出現一些設定的選項，可以順便把基本的內容都一起安裝在專案中。

1
vue create [projectName]

資料夾結構

  • /src
    • 開發用的檔案，會被編譯
  • /src/main.js
    • Webpack 專案中，程式的進入點
  • /src/assets
    • 開發所用到的圖片等資源
    • 特定尺寸以下的圖檔會被編譯成 base 64
  • /node_modules
    • 套件的資料夾，通常在 gitignore 中
  • /dist
    • npm run build 後所產生的交付用檔案
    • 需要在 HTML server 下才能運行
  • /dist/static
    • 不會被編譯的檔案

Config

Global CLI config

可以使用 vue config 來修改 CLI 的全域設定 。

Vue.config.js

Vue.config.js 可以新增在專案根目錄中，也可以在 package.json 中用 vue 為 key 來設定。
內容必須為下方的格式。

1
2
3
4
module.exports = {
  publicPath: '/',
  // etc.
}

常見的 key ：

  • publicPath
    • 部屬時的 Base URL ，預設為域名的根路徑
  • outputDir
    • 部屬的路徑，預設為 /dist

環境變量與模式

當開發與發佈所使用的特定參數不同，或是有一些敏感資訊希望被 git 忽略時，可以使用環境變數。
在 src 資料夾中可以加入環境變數設定的檔案，不同的檔名有不同的用途。

1
2
3
4
5
6
.env                # 在所有的環境中被載入
.env.local          # 在所有的環境中被載入，但會被 git 忽略
.env.[mode]         # 在指定的模式中被載入
.env.[mode].local   # 在指定的模式中被載入，但會被 git 忽略

# .env.[mode] 優先於 .env

mode 可分為：

  • development
    • 用於 vue-cli-service serve
  • production
    • 用於 vue-cli-service build 和 vue-cli-service test:e2e
  • test
    • 用於 vue-cli-service test:unit

如果想要指定特定指令所使用的環境變量，可以自訂腳本。

1
"dev-build": "vue-cli-service build --mode development"

變數的類型有三種：

  • NODE_ENV
    • 表示這份環境變數檔案的類型
    • 值為 “development” 、 “production” 或 “test”
    • 如果檔名已經是 .env.[mode] ，以檔名優先
  • BASE_URL
    • 部屬的路徑
    • 對應 vue.config.js 的 publicPath
  • VUE_APP_*
    • 其他所有的環境變數都要有 VUE_APP_ 前綴
    • 使用 process.env.VUE_APP_* 呼叫

常用套件

  • Vue Axios
    • axios 是一個 AJAX 的套件，封裝了 AJAX 的功能，讓其易於使用。

Vue Router

是 Vue.js 官方的路由管理器，可以進行動態路由配置。

配置

如果在開啟專案時已經有選擇 router ，會自動產生，但若沒有就可以自行配置。
首先安裝 Vue Router 。

1
2
# 在 NPM 5.0 前，要加上 --save 才會在 package.json 新增相關內容，之後的版本不加也 OK
npm install vue-router

接著在 /src 底下新增 router/index.js ，內容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 官方模組，沒有 ./ 的情況下預設是引用 node_modules 裡的內容
import Vue from 'vue';
import VueRouter from 'vue-router';
// 自訂模組
import Home from '../views/Home.vue';
import Signin from '../views/Signin.vue';

// 使用 Vue Router
Vue.use(VouRouter);

// 設定路由
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    // 路由可以有巢狀的設定
    children:[
      {
        path: '/signin',
        component: Signin,
      }
    ],
  },
];

// 宣告 VueRouter 實體
const router = new VueRouter({
  routes,
});

// export 為 ES6 匯出物件給外部使用的語法， default 可以讓外部自由命名
export default router;

再到 /src/main.js （程式的進入點）產生 Vue 實體的地方，指定 router 。

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue';
import App from './App.vue';
// 預設會引用到 './router/index.js'
import router from './router';

Vue.config.productionTip = false;

new Vue({
  // 指定 router
  router,
  render: (h) => h(App),
}).$mount('#app');

使用

在 HTML 的部分可以使用一些 router 的標籤。

  • <router-view>
    • 預設會依照當前的路徑及路由的設定來顯示不同的元件。
      • 依照上面的路由設定來說，如果 Home 元件中有 <router-view> ，網址又為 /signin ，那 <router-view> 所在的區塊就會顯示 Signin 元件。
    • 如果有 name 屬性，則會顯示對應的元件，例如 <router-view name=“Signin”>
  • <router-link>
    • 能切換路由到指定的路徑或元件，例如：
      • <router-link to="/signin">
      • <router-link :to="{name: ‘Home’}">
    • 預設會被渲染成 <a> ，可以用 tag 屬性指定其他標籤
    • 若為當前路徑，會被加上特定的類別名稱（模糊比對預設為 router-link-active ，完全相符預設為 router-link-exact-active ）

動態路由配置

在設定路由的路徑時，可以用 : 指定參數名稱。

1
2
3
4
5
6
7
const routes = [
  {
    path: '/product/:id',
    name: 'Product',
    component: Product,
  },
];

在元件中取用參數的方式如下：

1
this.$route.param.id

搭配 XHTMLHttpRequest 或 Axios 可以取得網址上的參數並發出相應的 Request 。

1
2
3
4
5
6
7
8
9
10
11
12
Vue.axios.get(`https://example.com/?id=${this.$route.param.id}`)
         .then(function (response) {
            // handle success
            console.log(response);
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
          .then(function () {
            // always executed
          });

Router Construction Options

除了上述內容以外， Vue Router 還有許多可以設定的選項。

  • mode ：網址的格式，建議用預設； history 需要搭配後端
  • base ： Base URL
  • linkActiveClass ：指定 router-link 為當下路徑時所加上的 class 名稱，為模糊比對
  • linkExactActiveClass ：同上，路徑必須完全相符

Programmatic Navigation

除了使用 <router-link> 來切換路由，也可以用 JavaScript 來切換。

用法類似於 History API 。

router.push(location, onComplete?, onAbort?)
  • location ：目標路由
  • onComplete ：切換成功時觸發的 function
  • onAbort ：切換失敗時觸發的 function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 用字串表示路徑
this.$router.push('home')

// 用物件指定路徑
this.$router.push({ path: 'home' })

// 用物件指定元件名稱，並用 params 帶上參數
this.$router.push({ name: 'user', params: { userId: '123' }})

// 用物件指定路徑，並用 query 帶上參數 （在指定路徑的情況下使用 params 是無效的）
this.$router.push({ path: 'register', query: { plan: 'private' }})

// 用物件指定路徑，字串內含參數
this.$router.push({ path: `/user/${userId}` })
router.replace(location, onComplete?, onAbort?)

跟 push 差不多，但是在瀏覽紀錄上會直接蓋掉當下這個瀏覽紀錄。
router-link 的用法是 <router-link to="/" replace> 。

router.go(n)

可以切換到瀏覽紀錄的某一頁。

1
2
3
4
5
// 切換到上一頁
this.$router.go(-1);

// 重刷當前頁面
this.$router.go(0);

待續