HackMD
比較 Vue.js 與 jQuery 的差異
✐ Vue
1. 用資料驅動功能
2. 採用Virtual DOM 的方式來操作DOM
✐ jquery
1. 用 DOM 觸發功能
2. 修改實體 DOM
➤ Vue 使用 Virtual DOM
- Virtual DOM 是以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構。
- 簡單來說，是要更新 DOM 時會先產生一個虛擬的 DOM ，待處理完後再更新至實體 DOM ，這樣的效能會比直接修改實體 DOM 好。
- 備註：普遍狀況下，不需經手動優化，仍能給予不錯的效能
➤在資料處理上…
Jquery 要更改資料時，先選擇要更改的 DOM 進行修改，當進行複雜龐大的專案時，容易資料分散不易維護。
Vue 則是監聽特定節點中的值來觸發需要改動的狀態，透過綁定 HTML 元素，使用模板語法來將我們想要顯示的資料輸出。
✐ Jquery
➤ Jquery 直接修改 DOM 範例
不斷的去跟 DOM 元素產生互動，邏輯上會顯的複雜（vue 關注點分離）
➷ 載入一支jq CDN
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
- 起手式檢查有無載入
console.log($);
$(this)是一個jquery物件（this 選到自身元素）jQuery 中已經把 this 包裝好變成指向本身元素的寫法，變得相當方便
➷ jq對元素的結構，內容進行操作：
.val()：讀取和修改一個表單元素的value
.text()：讀取和修改一個元素的文字內容
.html():讀取和修改一個元素的HTML內容
// 1. 將 "我是卡斯柏" 寫入 id text 裡
<div id="text"></div>
// 2.希望改變值的時候，可以取得當前的值
<input type="number" id="num">
<script>
console.log($);
// 檢查有無載入
const personText = '我是卡斯伯';
$(document).ready(function() {
// 起手式 （抓到畫面上的元素，或是把元素寫到畫面上）
$('#text').text(personText);
// $('#text') -> 取得 DOM 元素
// 使用 .text 這個方法把上面宣告的變數寫入
// .text(personText) 寫入值到元素上
// 先取得再寫入
$('#num').on('change', function(){
console.log($(this).val());
})
// .on監聽('事件change',)當每次值有變動時，都會取得他的值
// $(this)取得 DOM元素
// val()取得值
});
</script>
總結
Vue 適合進行需要資料傳輸的網站開發，例如購物車系統
tags: Vue3
參考：
