iT邦幫忙

2021 iThome 鐵人賽
DAY 20
2
Modern Web

排版神器 Tailwind CSS～和兔兔一起快速上手漂亮的元件開發！系列 第 21 篇

Day 20：「資料拿來我就幫你改」- Vue 基礎觀念及常用語法

13th鐵人賽 vue.js tailwindcss 元件開發 兔兔教
2760 瀏覽

  • 分享至 

  • xImage
    •  

Day20-Banner

嘿～昨天的內容還行嗎？

「兔兔，昨天突然就接收到大量語法！」

齁，這個我就要說聲不好意思～
原本是應該先介紹基本觀念，
但我們今天基本觀念要寫在 SFC 裡面練習，
所以阿，就先介紹一下 SFC 囉～

知道 SFC 之後，
我們就不用去考慮 Vue 掛載問題，
只要把注意力放在生命週期和變數之間的關係啦～！

然後畢竟我們這不是專門的 Vue 系列，
我還是著重在之後的相互配合上哦。

那今天，就讓我們稍微來 Speed Run 一下 Vue 吧！
 

carrotPoint 基本架構

我們雖然要講基本架構，
但是會以 SFC 的結構當作基底。

從 SFC 結構來說，會有以下三塊：

<!-- html 結構 -->
<template>
</template>

<!-- js 邏輯 -->
<script>
</script>

<!-- css 樣式 -->
<style>
</style>

這結構基本與 html 架構無異，
只是分界更明顯，然後沒有 <head>。

我們來稍微簡單解釋一下：

template

HTML 結構的放置處，結構中可直接使用 Vue 變數或是與 Vue 中的事件綁定。

script

Vue 與 Javascript 撰寫的地方。撰寫的變數或方法可以在 template 中直接存取。

style

CSS 樣式撰寫的地方，跟一般 CSS 寫法並無差異，如果只有 <style></style> 會是全域的，記得上了 scoped 才不會造成全域汙染。
 

那除了 SFC 之外，
<script> 中也是有結構的。

一般結構會是這樣：

<script>
export default {
  name: "元件名稱",
  props: [],
  data() {
    return {
      // ...
    }
  },
  methods: {
    // ...
  },
  computed: {
    // ...
  },
  components: {
    // ...
  }
}
</script>

我們這邊不介紹 composition API，只會介紹 options API 的部分。

 
其實他就是一個普通的 js 物件。
只是在物件之中所定義的屬性必須是特定的，
這樣 Vue 才能看得懂。

其實你也能自定義區塊，
只是如果你沒有對它特別處理，
那基本上對 Vue 來說毫無意義。

來稍微解釋一下各屬性的用途：

name

元件名稱，這會決定你在使用元件時的標籤名稱。

props

原意是屬性 (properties)，也就是指 html 元素的屬性，前端框架之中都是用屬性來對元件內部傳遞資料。

data( )

用於存放要用的變數，data() 中必須回傳物件 {}，並將要使用的變數等資料放在物件之中。

methods

撰寫函數的地方，在 methods 中的函數可以接收參數值；當 data 中資料有變動時，methods 中的函數會重新觸發執行重新運算。

computed

也是撰寫函數的地方，只是這邊的用法比較特別，而且不像 methods 中的函數一般，computed 不可以接收參數；當 data 中的變動的資料不是該函數所用到的時，該函數不會重新執行重新運算，會直接返回上一次運算後暫存的結果，相對 methods 較不耗效能。

如果覺得聽不懂這邊的敘述，文章看完之後有一個 methods 與 computed 觸發差異的範例可以去看看。

components

幫 Vue 加入元件的地方，將其他 SFC 引用進來之後，要加入 components 中才可以在 template 上使用。
 

除了基本結構之外，
最重要的，是生命週期。
 

carrotPoint 生命週期

嗯，我知道看起來很複雜，
我也看不懂 XDD

不過大致上從 Vue 2 到 Vue 3，
options API 的生命週期沒有 (什麼) 變化。

大致上可以用的生命週期有：

  • beforeCreate

  • created

  • beforeMount

  • mounted

  • beforeUpdate

  • updated

  • beforeUnmount

  • unmounted

  • errorCaptured

  • renderTracked

  • renderTriggered

  • activated

  • deactivated

但會不會都用到就看個人。

因為所謂 options API 就是，
這些其實是選擇性的使用！

所以我們可以直接像那些結構，
直接混著加在裡面，
假如我們要在元件掛載成功時顯示 log，

那該怎麼去做？
舉例：

<script>
export default {
  name: "Box",
  props: ["number","color"],
  mounted() {
    console.log("Box 元件已掛載！")
  }
}
</script>

我們這樣就把生命週期的 mounted 加進去了，這麼一來在元件掛載完成之後就會顯示 「Box 元件已掛載！」。

可以很清楚的發現，
跟前面相比只剩下了 mounted，
其他用不到的都拿掉了，
這就是所謂的選擇性。

生命週期就要自己去看一下文件，
看看那些生命週期都是做些什麼用的，
該用在什麼時候。
 

carrotPoint 魔法指令

前面那些，都不重要啦！

其實也不是不重要，
而是現在這些才是我喜歡的部分！

魔法指令聽起來很魔法，但是真的很魔法。

(哩洗咧供啥...)

但在講解魔法指令之前，
我們必須先知道模板語法。
因為這關乎到在 template 使用變數的方式。

舉例：

<template>
  <li> {{ content }} </li>
</template>

<script>
export default {
  data() {
    return {
      content: "項目１內容"
    }
  }
}
</script>

從變數名稱對照一下，
可以大概看出 li 渲染之後的內容就會是：

<li> 項目１內容 </li>

而這 {{ }} 就是模板語法，
在這裡面可以直接使用 data 中的變數，
也可以直接使用函數回傳的結果，
或是 js 的運算式。

指令

靈活運用 Vue 的魔法指令，
可以讓開發變的超級輕鬆，
無論是流程控制、取值，
又或者是排版，都很有幫助。

雙向資料綁定 v-model

vue 是有雙向綁定的，用 v-model 可以輕鬆的在表單元素上快速取值和賦值；之前在 Day17 中談到使用前端框架的好處時，有說過資料互動上的方便處，而 v-model 正是那最黑魔法的指令，因為當你 input 元件的值改變時，變數內容也已改變，當你修改變數內容時，畫面上 input 元件的值也會隨之改變。

這是純 js 的做法：

<input type="text" id="input" oninput="textSync()" />
<div id="show"></div>

<script>
function textSync() {
  const input = document.getElementById("input")
  const show = document.getElementById("show")
  
  show.innerText = input.value
}
</script>

使用 v-model 只需要這樣：

<template>
  <input type="text" v-model="content" />
  <div>{{ content }}</div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  }
}
</script>

這樣他就會直接把變數 content 與 input 元素的值做雙向綁定，不像是純 js 還需要定義 id 名稱去抓取 DOM 元素然後再向將內容渲染到指定的元素上。

渲染控制 v-if

在 html 元素上做判斷式是從前想也想不到的事情，但透過前端框架這件事情可以輕鬆實現，尤其是 vue。

透過 v-if 可以使用變數內容或函數輸出的結果值來做判斷式，true 則顯示元素，false 則不渲染到頁面上。

<template>
  <div v-if="content==='a'"> 是 a </div>
</template>

<script>
export default {
  data() {
    return {
      content: 'a'
    }
  }
}
</script>

另還有 v-elseif 和 v-else，這邊就不介紹了。

顯示控制 v-show

在視覺上和 v-if 實現的效果差不多，但根本上是不一樣的。 v-if 判斷式結果為 false 時是直接不渲染元素內容，而 v-show 則是渲染到頁面上但利用 CSS 的 display:none; 將元素隱藏。

<template>
  <div v-show="content==='a'"> 是 a </div>
</template>

<script>
export default {
  data() {
    return {
      content: 'a'
    }
  }
}
</script>

迴圈 v-for

這個也很黑魔法啦！ 既然有 if 當然要有 for 啊！ 這可是寫程式的標配欸。 v-for 可以從變數或者函數回傳的陣列、物件之類的內容來使元素或元件重複，這在做清單列表、圖庫等等重複性高的畫面時超級無敵實用！

單純數量的 v-for：

<template>
  <div v-for="count in 30">數字 {{count}}</div>
</template>

這樣就會有 30 個 div，然後內容是從 1 列到 30 了！

如果是從變數的話：

<template>
  <div v-for="dir in dirs">方向：{{dir}}</div>
</template>

<script>
export default {
  data() {
    return {
      dirs: ["上","左","下","右"]
    }
  }
}
</script>

所以有些資料是從 api 取得，我們就可以利用生命週期 mounted 等等的組合來完成。

像是：

<template>
  <div>
    導航路徑：
    <div v-for="path in paths">{{path}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paths: []
    }
  },
  mounted() {
    // 假設這是 api 取得的資料
    const p = []
    
    for(let i=0;i<30;i++){
      p.push(i)
    }
    
    // 在 template 之外的地方存取 data 中的變數或其他函數時，前面必須加上 `this`
    // 將取得到的資料存回 data 中的變數
    this.paths = p
  }
}
</script>

 
另外兩個常見指令會更常用到，但跟前面使用起來的感覺不太相同。我們接著繼續看。

屬性綁定 v-bind

用途在於把資料綁定在屬性上，也是元件傳遞的一把關鍵鑰匙。原本 html 元素上的屬性都是固定值，要使用 js 改變它的內容其實有點小麻煩。 但是有了 v-bind 之後再也不用煩惱，可以讓元素的屬性值隨變數內容改變。

舉例：

<template>
  <div v-bind:id="id"> # {{id}}</div>
</template>

<script>
export default {
  data() {
    return {
      id: "test"
    }
  }
}
</script>

基本上 html 元素具有的屬性都能夠綁定，也可以綁定自定義的屬性，前面說過的元件的 props 就可以讀取到這些屬性的值。

如果覺得 v-bind 前綴很長，也可以縮短成：

<div v-bind:id="id"> # {{id}}</div>

<!-- 縮短 -->
<div :id="id"> # {{id}}</div>

 

事件綁定 v-on

綁定事件用，用法與 v-bind 相同，可以使事件發生時觸發綁定的函數或者執行一行 js 的陳述式。同時，這是元件資料傳遞的另一把鑰匙。

執行一行陳述式，舉例：

<template>
  <div>
    {{ num }}
    <div v-on:click="num=0">歸零</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 100
    }
  }
}
</script>

呼叫函數的舉例：

<template>
  <div>
    {{ num }}
    <div v-on:click="clear()">歸零</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 100
    }
  },
  methods: {
    clear() {
      this.num = 0
    }
  }
}
</script>

也是與 v-bind 相同，基本上預設有提供的事件都能夠綁定。也可以綁定自訂事件，但這就與元件資料傳遞有關，之後會提到。

預設，v-on 也是可以縮短語法的：

<div v-on:click="clear()">歸零</div>

<!-- 縮短 -->
<div @click="clear()">歸零</div>

 

會，很燒腦嗎？
基本上這些東西是熟能生巧，
這些東西大概用了幾遍就會熟悉了。

其實寫 Vue 的時候，
真的就是不斷使用上面這些內容而已，
只是用法就要因應你需要的功能去做調整。

那就大概這樣了！
如果 vue 還不熟的話盡量多看一兩次，
那下面也會提供我覺得不錯的資源～
先躺了！ (Zz..Zz...)
 

carrotPoint 給你們的回家作業：

  • 作業實施要點：
    • 複習 Day17 到 Day20
    • 大概記一下今天的內容
  • methods、computed 觸發差異範例：有種你點點看
  • 超推的 Vue 學習資源：Vue.js 008
     

關於兔兔們：


 

( # 兔兔小聲說 )

你們信教嗎？

「嘖嘖你這隻兔子，一定又要說什麼兔兔教了吼！！」

錯了，這你就有所不知了...
此時此刻，我是回籠教的。

兔兔 :

 
因為我現在的主要任務
是睡覺。


上一篇
Day 19：「通通拿去做雞精啦！」- Vue SFC
下一篇
Day 21：「爸爸說，家裡要重新裝潢了」- 關於樣式的屬性綁定講解
系列文
排版神器 Tailwind CSS～和兔兔一起快速上手漂亮的元件開發！ 共 32 篇
  1. 28
    Day 27：「流浪到淡水！」- 手風琴選單
  2. 29
    Day 28：「今天幾月幾號啊？」- 簡易日曆
  3. 30
    Day 29：「欸！你填一下這張表！」- 彈跳視窗、Modal
  4. 31
    Day 30：「很刺眼，這樣太亮了啦！」- 深色模式切換開關
  5. 32
    Day 31：「不夠吃了...哪裡還有紅蘿蔔？」- Tailwind 和 Vue 的資源分享
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙