# 比較 Vue.js 與 jQuery 的差異
<br>
<div class="d-flex">
<div class="w-50 bg-l">
<span class="t-2">✐ Vue</span>
<div>1. 用資料驅動功能</div>
<div>2. 採用Virtual DOM 的方式來操作DOM</div>
</div>
<div class="w-50 bg-r">
<span class="t-2">✐ jquery</span>
<div>
1. 用 DOM 觸發功能
</div>
<div>2. 修改實體 DOM</div>
</div>
</div>
<br>

### ➤ Vue 使用 Virtual DOM
- Virtual DOM 是以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構。
- 簡單來說，是要更新 DOM 時會先產生一個虛擬的 DOM ，待處理完後再更新至實體 DOM ，這樣的效能會比直接修改實體 DOM 好。
- 備註：普遍狀況下，不需經手動優化，仍能給予不錯的效能

### ➤在資料處理上...

Jquery 要更改資料時，先選擇要更改的 DOM 進行修改，當進行複雜龐大的專案時，容易資料分散不易維護。

Vue 則是監聽特定節點中的值來觸發需要改動的狀態，透過**綁定 HTML 元素**，使用模板語法來將我們想要顯示的資料輸出。

<br><hr>

## ✐ Jquery
### ➤ Jquery 直接修改 DOM 範例
不斷的去跟 DOM 元素產生互動，邏輯上會顯的複雜（vue 關注點分離）
#### ➷ 載入一支jq [CDN](https://code.jquery.com/)

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

- 起手式檢查有無載入

    console.log($);

<br>
:::info
`$(this)`是一個jquery物件（[this 選到自身元素](https://hsuchihting.github.io/jQuery/20200630/3070987172/)）jQuery 中已經把 this 包裝好變成指向本身元素的寫法，變得相當方便
:::

#### ➷ jq對元素的結構，內容進行操作：
<span class="bg-b">.val()</span>：讀取和修改一個表單元素的value

<span class="bg-b">.text()</span>：讀取和修改一個元素的文字內容

<span class="bg-b">.html()</span>:讀取和修改一個元素的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`
{%hackmd @unayojanni/H1Qq0uKkK %}

<style>
@media (min-width: 769px){
.d-flex{display:flex;}
.w-50{width:50%;padding:7px}
}
.bg-r{background-color: #0001ff1a;}
.bg-l{background-color: #ffcf001a;}
.t-2{font-size: 1.5em;font-weight:600;line-height: 1.25;}
</style>

> 參考：
> - [Virtual DOM 概述](https://cythilya.github.io/2017/03/31/virtual-dom/)
> - [Vue 與 Jquery 比較
](https://medium.com/@publiclou123/vue-%E8%88%87-jquery-%E6%AF%94%E8%BC%83-478a991aeaf0)