【Vue.js 3.0】Vue 3.0 - 千呼萬喚始出來
Vue3正式版終於出現了啊，因為一開始是去學Kuro大大的Vue2.6的課程，剛好是3.0的前一版，本來滿擔心會不會差很多，但是實際使用上好像也還好，其實是我只會皮毛而己。 這應該是今年的最後一篇文章了，先預祝大家新年快樂，2021大發財。現在，讓我們來做做一個簡單的購物車APP吧，Let’s go。
首先我們想做一個這樣子的頁面
第一步 - 基本設定
先將相關的CSS跟圖片載入，資料夾的結構加下所示
建立index.html + index.js
- 載入styles.css，跟加入vue.global.js (目前加入的是v3.0.3)
- 注意順序不要放錯
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/styles.css" />
<script src="https://unpkg.com/vue@3.0.3/dist/vue.global.js"></script>
<title>Apple iPad Air 2020</title>
</head>
<body>
<div id="main">
<div class="nav-bar"></div>
<div class="cart">購物數量</div>
<div class="product-display">
<div class="product-container">
<div class="product-image"></div>
<div class="product-info"></div>
</div>
</div>
</div>
<script src="./index.js"></script>
<script>
const mountedApp = myApp.mount("#main")
</script>
</body>
</html>
// index.js
const myApp = Vue.createApp({
data() {
return {}
},
methods: {},
computed: {},
})
第二步 - 變數
加入變數
- 在index.js中的data()中，加入cart變數
- 變數的語法是 {{ 變數 }}
改變數值
- 在Browser的主控台上試著去改變cart數值，畫面上也會跟著改變
- 這個方法改善了以往數值改變後，還去寫js去更新畫面上的顯示
第三步 - 圖片
加入圖片
- 改變<img>的src位置
- 這個是使用「v-bind:src」屬性做「單向綁定」，簡寫為「:src」
- 在這裡可以看到，這個「v-」開頭的屬性是Vue自訂的屬性，也維持跟html類似的名字
- 再次執行index.html，看看圖片有沒有正常出現
第四步 - 顯示 / 隱藏
加入圖片
- 加入inventory，設定庫存大小
- 利用「v-show」來顯示 / 隱藏該Tag
- 利用主控台來改變「inventory」的值，看看有什麼變化
第五步 - 判斷式
if else-if else
- 利用「if else」來決定有沒有現貨
- 利用主控台來改變「inventory」的值，看看有什麼變化
- 「if else」跟「v-show」不一樣的地方是，它真的是「不見了」
第六步 - 迴圈
for in
- 在data()中加上details的Array值
- 利用「v-for」來決定顯示Array的值
第七步 - 滑鼠點擊
@click
- 在畫面上加入一個Button，用途是點一下，右上角的購物數量會加1
- 利用「inStock」來切換「:class」，改變顯示的樣式
- 在index.js中的「methods」加入一個function，利用「this.cart」來取得變數值
- 再利用「v-on:click / @click」來加入按鍵的動作，也就是js上的onClick的事件功能
第八步 - 滑鼠滑過
@mouseover
- 再利用「v-on:mouseover / @mouseover」來加入滑鼠滑過的事件的動作
computed
- 這裡要比較注意的是varinats的Array物件，利用selectedIndex來切換在畫面上的圖片，而不是用url
- 所以在滑過圓形的div時，是讓selectedIndex記錄Array的index
- 當selectedIndex「變化時」，會去觸發在「computed」中有使用到「selectedIndex」的function
- 也就是說，當值有變化時，會去「computed」裡尋找，有點像「監聽」的味道
第九步
「標題」與「庫存」
- 再進一步利用「selectedIndex」來改變 「標題」與「庫存」的數值
- 這邊要注意的是「不可以同名」，不然會有錯誤產生
第十步 - 可重複使用的元件1
productDisplayTag.js
- 這裡利用「component()」來產生可以重複使用的元件，html語法會加在「template」之中
- 第一個參數是自定義「html tag」的名稱，因為在html中沒有分大小寫，所以在取名字的時候要注意
- 當然「productDisplayTag.js」也要加在「index.html」裡面，不過這裡只是測試一下而己
第十一步 - 可重複使用的元件2
大搬家
- 接著把「index.js」內的東西，搬到「productDisplayTag.js」內
- 這裡要介紹一個VSCode的套件叫做「es6-string-html」，它能把template內的「純文字」變成「html有顏色的文字」
- 到這裡會發現「{{ cart }}」讀不到值了，要怎麼辦呢？請接著看下去
第十二步 - 自定義動作
this.$emit()
- 這是一個很重要的功能，因為「變數」有時候會在其它的地方，而不在同一個檔案裡面，要怎麼辦呢？
- 使用this.$emit(<動作名稱>)，主動「發射」產生動作，然後去執行「另一個function」
第十三步 - 自定義屬性
this.$emit()
- 這是另一個很重要的功能，因為自定義「html tag」，沒有辦法「直接」加上「{{ <變數> }}」去使用 (當然還是有辦法的)
- 所以新增一個「props」的物件，去「增加」在該tag上的atttibute，設定它的類型，去接收「isPremium」這個變數值
變數？函數？屬性？
- 這裡新增一個function，利用自定義的「attribute」，來設定價格
- 在這裡可以發現，屬性 / 函數也可以當變數用，所以之前為什麼明明是函數，但不能同名的原因就在這裡，html真的是亂啊
同場加映 - 雙向綁定
首先將兩個component加入到html之中
- 試試看畫面正不正常
雙向綁定
- 加入三個變數，然後將這三個變數與輸入框「雙向綁定 - v-model」，當然目前完全不會有變化
Submit - 送出
- 接下來處理按下「input送出鍵」的功能 (@submit-prevent)
新增評論
- 這裡會新增一個reviews的array來記錄評論，利用「$emit」去執行
- 這裡可以看到，我們在輸入框，並沒有做「存值」的動作，但是值卻存起來了，因為「雙向綁定 - v-model」的關係，兩邊是連動的
顯示評論
- 這裡利用props + v-for顯示資料，到這裡就完成了
生命週期
- 因為v3.0開始就把生命週期放在setup()裡面了，然後要加上第一行才可以用，我想應該是為了省資源吧？
總結
- 這裡的東西都是我亂看亂想的，先求有，才求好，慢慢來吧，前端的東西真的變化太快了啦…T.T，おわり
Code在這 / 範例程式碼下載 / 同場加映在這 / 範例程式碼下載
