最近，部門有一位從手機開發轉到網頁前端的工程師弟弟。
與他合作的其實還算愉快，但很快地發現他其實寫一些 function 的邏輯上的問題不大，但建構出來的元件常常看了覺得有點小謎。好吧，是很謎。
例如: 寫一個 input 的 component，他會這樣寫：
<template> <div id="name"> <input v-model:modelValue="name" /> </div> </template>
如果你沒學過 HTML 和 CSS，你可能會迷惑這寫法哪裡有問題。簡單的說明一下：
在 HTML 中，id 屬性的值應該是唯一的，代表該元素的唯一識別。在一個頁面中，同一個 id 值只能被使用一次，否則會違反 HTML 的規範。便於 JavaScript、CSS 和其他技術在操作和樣式化元素時能夠確切地指定目標。
如果在一個頁面中使用了多個相同 id 值的元素，可能會：
- JavaScript 衝突： 當有多個相同
id值時，JavaScript 可能無法確定要操作的是哪個元素。 - CSS 衝突： 如果多個元素擁有相同的
id值，樣式可能會被混亂或只應用到第一個匹配的元素。 - HTML 驗證: 使用相同的
id值可能會導致 HTML 驗證錯誤，並使你的檔案不符合標準。
所以，各位啊！ 如果你剛從其他物件導向語言轉向前端框架，建議花一些時間去搞懂 HTML, CSS 和瀏覽器的渲染原理。學會這兩者可以讓你建立堅實的前端基礎，理解網頁的結構和外觀設計。
跳過不學，你可能會碰到以下的問題：
1. 不能理解你在模板中綁定了什麼
Vue.js 使用基於 HTML 的模板語法。Vue 的模板中包含了 HTML 結構和 Vue 特有的指令，這些指令用於實現動態數據綁定和其他功能。
2. 樣式處理上的困難
如果你的工作，不是串完 api 就結束，還要解決各種裝置顯示還有樣式問題。沒有掌握基本的 CSS ，會讓專案寸步難行。
3. 組件化開發的原則理解
Vue.js 以組件化的方式構建應用程式。每個組件都包含自己的 HTML、CSS 和 JavaScript，如果沒有一定的熟悉程度，會難以有效率的建構好元件。
各位！一起加油吧！
