--- title: vue基礎教學 tags: vue --- 文字的呈現 === 1. 文字的呈現 ![](https://i.imgur.com/NhGlmKY.png) 2. 試圖改變作嘗試 * VScode ![](https://i.imgur.com/ij3P8TJ.png) * 顯示內容為 ![](https://i.imgur.com/JreN9fM.png) 3. 試著自己創一個新的檔案 * VScode ![](https://i.imgur.com/lUH0JZG.png) * 顯示內容為 ![](https://i.imgur.com/29bPmtQ.png) CSS的呈現 === * scoped為設定CSS的影響範圍 == 單一檔案內的CSS ![](https://i.imgur.com/5WGujKL.png) * 有scoped的顯示如下 ![](https://i.imgur.com/5cnsLQg.png) * 無scoped的顯示如下 ![](https://i.imgur.com/stDZO4t.png) 按鈕的呈現 === 1. 動態按鈕的呈現 * VScode ![](https://i.imgur.com/jbdmEIX.png) * 顯示內容為 ![](https://i.imgur.com/J2LrJWz.png) 2. 試著在header做一個按鈕 按下去會彈出視窗說hi * VScode ![](https://i.imgur.com/2ex1Wbm.png) * 顯示內容為 按下藍色按鈕 彈出hi ![](https://i.imgur.com/XB7PfTY.png) 3. 使用解構函式 讓其可以跳出彈出視窗 輸入內容後變動畫面的呈現 * 解構檔案(第二行)==只取其中需要用的部分 * 由於當前檔案內的Str內容是無法直接取用 故可使用宣告一個變數(第五行) 使其變成變數即可取用 * 內容顯示的部分則是使用宣告的變數 * 把按鈕內容變動為如下圖 * VScode ![](https://i.imgur.com/oPYQAqs.png) * 顯示內容為 ![](https://i.imgur.com/TDeX7dM.png) * 輸入後畫面變更為 ![](https://i.imgur.com/HDCt51S.png) 輸入框的呈現 === 1. input輸入後在p內顯示文字內容 * 先給它一個input和p input內放一個v-model為name * 上方宣告name * 完成後輸入框內輸入內容可與上方p標籤內的文字呼應 下方輸入時上方動態同步的變更內容 * VScode ![](https://i.imgur.com/65DAk7m.png) * 顯示內容為 ![](https://i.imgur.com/znoicU9.png) 2.