首頁技術(shù)文章正文

使用vue構(gòu)建用戶界面的優(yōu)點(diǎn)

更新時(shí)間:2022-02-14 來源:黑馬程序員 瀏覽量:

前端開發(fā)者最主要的工作,就是為網(wǎng)站的使用者(又稱為:網(wǎng)站的用戶)構(gòu)建出美觀、舒適、好用的網(wǎng)頁。vue的出現(xiàn),逐漸替代了傳統(tǒng)的jQuery + 模板引擎構(gòu)建頁面方式,逐漸成為在構(gòu)建用戶界面方面的主流開發(fā)框架。下面就來看一下與vue框架傳統(tǒng)開發(fā)框架相比有哪些優(yōu)缺點(diǎn)。

jQuery + 模板引擎構(gòu)建頁面

在傳統(tǒng)的Web 前端開發(fā)中,是基于jQuery + 模板引擎的方式來構(gòu)建用戶界面的。

編寫結(jié)構(gòu):

基于模板引擎技術(shù),把數(shù)據(jù)渲染到頁面上。

優(yōu)點(diǎn):初步解放了前端開發(fā)者,從此不用手動(dòng)拼接字符串來渲染網(wǎng)頁結(jié)構(gòu)了。

缺點(diǎn):1.需要定義大量的模板結(jié)構(gòu);2.缺少語法高亮和智能提示;3.數(shù)據(jù)變化時(shí)需要重新調(diào)

用模板編譯的函數(shù),否則頁面結(jié)構(gòu)不會(huì)更新;

美化樣式:

基礎(chǔ)CSS樣式,美化網(wǎng)頁的可視化效果。

處理交互:

基于jQuery技術(shù),處理用戶和網(wǎng)頁之間的交互行為。

優(yōu)點(diǎn):屏蔽了DOMAPI之間的兼容性,提高了DOM操作的效率和體驗(yàn)。

缺點(diǎn):當(dāng)業(yè)務(wù)復(fù)雜時(shí)、數(shù)據(jù)變化頻繁時(shí),前端程開發(fā)者需要把大量的時(shí)間和精力浪費(fèi)在DOM 的操作上,而不是核心業(yè)務(wù)的處理上。

vue 構(gòu)建用戶界面

使用 vue 構(gòu)建用戶界面,解決了 jQuery + 模板引擎 的諸多痛點(diǎn),極大的提高了前端開發(fā)的效率和體驗(yàn)。

編寫結(jié)構(gòu):

基于vue中提供的指令,可以方便快捷的渲染頁面的結(jié)構(gòu)(樂不思蜀)。數(shù)據(jù)驅(qū)動(dòng)視圖(只要頁面依賴的數(shù)據(jù)源變化,則頁面自動(dòng)重新渲染) 指令是vue為開發(fā)者提供的模板語法,用來輔助開發(fā)者渲染頁面的結(jié)構(gòu)。

美化樣式:

基礎(chǔ)CSS樣式,美化網(wǎng)頁的可視化效果。

處理交互:

基于vue中提供的事件綁定,可以輕松處理用戶和頁面之間的交互行為。開發(fā)者把工作的重心放在核心業(yè)務(wù)的實(shí)現(xiàn)上。





猜你喜歡:

什么是 vue-cli?vue-cli創(chuàng)建項(xiàng)目的兩種方式

vue全家桶有哪些東西?具體指什么?【附贈(zèng)Vue全家桶教程】

怎樣在vue3.x中全局配置axios?

什么是跨域?VUE如何實(shí)現(xiàn)跨域?

黑馬程序員HTML前端與移動(dòng)開發(fā)培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!