iT邦幫忙

2021 iThome 鐵人賽

DAY 1
1
Modern Web

前端暴龍機,Vue2.x 進化 Vue3系列 第 1

[前端暴龍機,Vue2.x 進化 Vue3 ] Day1.在認識vue之前(一)

/images/emoticon/emoticon81.gif[講古時間]: 回憶過去~ 痛苦的相思忘不了~
哈哈,記得剛出社會時,雖然說是張白紙,不過可能太白~ 導致處處碰壁
現在就來學學框架,跟著小白一起進化吧~
感覺會了框架,就 Level UP UP
本系列文章可能偏向新手閱讀,從不認識框架到認識Vue框架,從Vue2.x的寫法再到Vue3,有錯誤的地方再麻煩前輩糾正 XD

在認識vue之前

在介紹 vue 之前,會先說說一些算是關於框架的特性,與一般網頁開發的概念有些不同,這也是當初面試時自己看官方文件有被問到的幾個問題
(雖然當初要應徵的公司是要求我去看 Angular ~ 不過後來學會 Vue 後發現,框架的特性其實差異不大,目前也是用 Vue 在開發)

1. 資料驅動畫面

甚麼是資料驅動畫面?
資料驅動畫面的概念就如同字面上的意思,畫面上內容的改變已經不像之前透過 JavaScript 去操作 DOM 的方式來變更,而是透過資料來源的操作去更新畫面內容,像是我們宣告了一個變數,只要去改變 變數的值 畫面就會更新了

舉例來說:
JavaScript 去操作 DOM 的方式

document.querySelector("#id").textContent  = "要更新的內容";

資料驅動畫面的方式

// 這邊先以變數的觀念做解釋

let idTextContent = '原本內容';

// 改變 idTextContent 的值 >> 更新畫面顯示
idTextContent = '要更新的內容';

不知道這樣的舉例,是不是可以稍微有略懂略懂的感覺~ XD

2. 雙向綁定

雙向綁定的概念我覺得是會跟 "資料驅動畫面" 差不多,直接用例子來講可能會比較好理解

當我們透過被綁定的輸入框輸入了某些資料,這些資料會被自動儲存到我們指定的宣告變數中,
同樣,如果更動指定宣告變數的值,被綁定的輸入框內容也會跟著被改變

可能稍微有點抽象,來點畫面~看看有沒有比較容易懂
指定宣告變數 >> let message = "Hello Vue!",並與輸入框做雙向綁定
https://ithelp.ithome.com.tw/upload/images/20210811/20120722lpsQSgsgQk.jpg
所以當輸入框的內容被我們改變,message 的值也會跟著被改變
https://ithelp.ithome.com.tw/upload/images/20210811/201207225BM2k9G1oG.jpg

後面會提到的 v-model 就是 "雙向綁定" ,所以這邊先解釋一下名詞的觀念


下一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day2.在認識vue之前(二)
系列文
前端暴龍機,Vue2.x 進化 Vue330

尚未有邦友留言

立即登入留言