接續上一篇文教了如何在電腦上安裝Vue的環境
模板部分：
樣式部分：
腳本部分：
ref 主要用於創建單個基本類型數據的響應式引用，例如數字、字符串等。
reactive 則用於創建包含多個屬性的複雜對象的響應式引用，可以是對象、數組等複雜數據類型。
使用ref 創建的響應式引用，需要通過 .value 屬性來訪問和修改其值。
使用reactive 創建的響應式引用，則可以直接訪問和修改其屬性，無需額外的 .value。
ref 適用於創建基本類型的響應式數據，特別適用於在模板中直接使用。
reactive 適用於創建複雜對象的響應式數據，可以用於管理組件的狀態、數據模型等。
如果還沒學過且對Vue有興趣的可以先去看上篇
這篇主要是從核心功能開始教起
第一步先將資料夾點開找到src資料夾進入後點擊App.vue
App.vue在 Vue.js 專案中扮演著核心角色。它是一個單文件組件，定義了應用程式的根組件。
在典型的 Vue.js 專案中，App.vue 包含了應用程式的整體結構，通常分為以下三個部分：
定義了應用程式的佈局和結構，包括全局元件（如導覽列、側邊欄、頁腳等）和動態元件（如路由視圖等）。
樣式部分：
包含了應用程式的全局樣式和佈局，用於定義頁面元素的外觀和樣式。
腳本部分：
包含了 Vue.js 組件的邏輯代碼，例如資料處理、事件監聽等。這部分代碼用於初始化組件的狀態，定義方法和生命週期鉤子等。
在這邊我會先從最簡單的教起
打開app.vue之後會看到這樣的程式碼
都刪除掉，並且在code區輸入
<template>
<h1>helloworld</h1>
</template>
在 HTML 中，大多數情況下，元素需要以 <開頭>和結尾，例如<h1>和<p> 等標籤。
這些標籤是HTML 元素的起始和結束標記，它們告訴瀏覽器如何解釋和渲染頁面內容。
然而，也有一些元素是自我封閉的，即它們不需要顯式的結束標記，例如<img>和 <input> 等。
這些元素只需要一個起始標記，例如<img src="ex.jpg"> 。
也就是說
<template> 是宣告模板起點
<h1>helloworld</h1> <h1>是宣告文字為h1大小，顯示文字為helloworld，</h1>為結束範圍
</template> 是宣告模板終點
後續解釋會跳過，應該也是很好理解
輸入完上述code之後使用CTRL+S進行保存動作，接著切換到網頁會看到網頁的變化
此時有些寫過網頁的人就會發現，為什麼網頁沒有按F5刷新卻還是自動刷新了呢
因為 npm run dev 的時候是使用內置的開發伺服器來啟動項目
這個開發伺服器會監聽項目文件的變化，並在文件發生變化時自動重新加載頁面，以便能夠實時看到
修改後的效果，而不必手動重新整理頁面。
在 Vue CLI 中，默認的開發伺服器是基於 webpack-dev-server 構建的，
它提供了熱模塊替換（HotModule Replacement）等功能，可以大大提高開發效率。
聲明式渲染與命令式渲染
命令式:
例如，請程式做什麼事，去處理什麼function，叫DOM設定一個值
在命令式渲染中，需要明確地告訴程序每一步該做什麼
通常情況下，需要直接操作 DOM 元素，手動添加、刪除或修改元素以達到所需的效果。
命令式渲染通常會導致代碼更複雜、難以維護和理解，因為需要管理所有 DOM 操作的細節
傳統的 jQuery 是一個命令式渲染的例子，因為需要通過直接調用 DOM 方法來操作頁面元素。
聲明式:
例如，跟框架說我要這個"結果"，中間怎麼發生就是框架自行處理
聲明式對開發者來說會相對的輕鬆一點
通常情況下，會將組件的狀態與模板綁定，當狀態發生變化時，
框架會自動更新模板以反映這些變化。
聲明式渲染提供了一種更簡潔、更易於理解和維護的方式來構建 UI，只需要關注組件的狀態以及
如何根據狀態來呈現 UI，而不需要擔心如何進行具體的 DOM 操作。
聲明式渲染應用
在宣告資料狀態時常使用 ref 與 reactive 兩種
它們告訴 Vue 哪些資料應該是響應式的。在使用它們時，你只需要描述資料的狀態，
而不需要描述資料如何被更新或者如何和視圖進行綁定。
在原有的框架上新增了JS與聲明式渲染
可以看到這邊是用 const 而不是 let message
const 多做一層封裝的動作將 message 封裝成物件，讓他有不可變性
因為 ref 的資料不會直接對他修改，他不需要變成可以改變的變數
這個動作可以讓代碼有不可變性與提高可靠性與可維護性
在模板上加入{{message}}後網頁會呈現什麼畫面呢
沒錯是一個 h1 大小的 helloworld 與正常大小的 helloworld2
為什麼不是兩個 helloworld 呢 因為在const message的下一行是
message.value，這會將數據寫上 helloworld2，
也就是說之後需要修改只需要改 message.value 即可
reactive 是 Vue 提供的一個函數，用於創建響應式對象。
它使得對象的屬性變化可以被 Vue 追蹤，從而能夠在數據變化時自動更新相關的視圖。
reactive 呈現出來的樣子是怎樣呢
沒錯，其實跟ref呈現的樣子是一樣的
這時候有人就會問網頁看起來很亂怎麼辦
這時候就要用上<br>這個標籤，這個標籤是跳行作用
跳行之後呈現的畫面如下
在新手階段使用reactive會覺得比ref來說更為複雜些
但是只要熟悉之後其實兩者用的速度都是差不多的
課程筆記與課後補充:
首先，打開了App.vue 檔案，以一個簡單的例子開始，將 App.vue 中的所有內容刪除，了解HTML模板架構，展示了一個簡單的 "Hello World"。
在解釋模板部分的時候，介紹了 HTML 標籤的使用方法，以及 <template> 標籤的作用。
還提到了在 Vue 專案中，使用 npm run dev 命令啟動開發伺服器，使得在修改代碼後網頁可以自動刷新。
接著，講解了聲明式渲染與命令式渲染的區別，以及聲明式渲染的應用。
完整程式碼
<script setup> #宣告JS
ref與reactive差異
數據類型不同：
ref 主要用於創建單個基本類型數據的響應式引用，例如數字、字符串等。
reactive 則用於創建包含多個屬性的複雜對象的響應式引用，可以是對象、數組等複雜數據類型。
引用訪問方式不同：
使用reactive 創建的響應式引用，則可以直接訪問和修改其屬性，無需額外的 .value。
用途不同：
reactive 適用於創建複雜對象的響應式數據，可以用於管理組件的狀態、數據模型等。
本次學習檔案github
