前言

今天是開發的Day4，重點為RWD版面以及V指令的複習。

實現內容

• RWD修正
• Tailwind：斷點、自定義變數
• v-model指令

已解決問題

1. 在背景顏色中將syle變數化後，直接套入class名

//<template>
<button v-bind:class="[buttondefaultStyle]" @click="toLoginView">toLoginPage</button>
//<scipt>
const buttondefaultStyle = "text-white  m-4 p-2 rounded-md bg-gray_500"

2. 在Tailwind中自定義斷點

• Tailwind本身的響應式斷點：

用法示例：

.sm:bg-gray-500 {
  /* 在 640px 寬度下應用灰色背景 */  
}

.lg:text-lg {
  /* 在 1024px 寬度下應用大號文字 */ 
}

• 在配置文件中通過theme.screens，添加自定義的響應斷點

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',

      'mobile': '500px', // 自定義斷點
    },
  },
}

這樣就可以在 Tailwind 的class中使用這個自定義的 mobile 斷點。

• 想使用任意值時：也可以用中括號語法定義一次性值

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->
</div>

參考資料：Tailwind - 响应式断点

3. 複習v-model的雙向綁定

<script setup>
import { ref } from 'vue'

const text = ref('Unknown') 
</script>

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

1. text 被定義為一個響應式的ref對象，能夠跟蹤數據的變化。並且 text 會作為 v-model 雙向綁定的數據來源，如同一個數據來源一樣傳遞數據。
2. 在<input>標籤上使用 v-model 指令，並將其值綁定到之前定義的 text ref 對象上。這樣就實現了雙向綁定：輸入框的輸入會影響到 text 的值。

圖片來源：How to Use v-model to Access Input Values in Vue

• 原生JS的比較

<!-- 原生 JS -->
<input id="input">

<p id="message"></p>

// 原生 JS
const input = document.getElementById('input')
const p = document.getElementById('message')

input.addEventListener('input', event => {
  p.innerText = event.target.value
})

可以看出原生JS需要監聽input事件，並手動更新DOM。

參考資料：
Day 20：「資料拿來我就幫你改」- Vue 基礎觀念及常用語法
How to Use v-model to Access Input Values in Vue

待完成任務

切版

• 設計稿的未完成部分：細線、icon
• 再嘗試增加Tailwind的可讀性

指令

• 實際操作vue指令

firebase

• firebase驗證和vue的串接

總結

• 熟悉Tailwind的RWD操作
• V指令與原生JS的比較