国产另类ts人妖一区二区_欧美肥老太做爰视频_快穿高h肉_国产欧美综合在线

當(dāng)前位置: 首頁 / 技術(shù)干貨 / 正文
好程序員web前端培訓(xùn)分享為什么那么多人使用vue.js

2020-09-03

web前端培訓(xùn)

  好程序員web前端培訓(xùn)分享為什么那么多人使用vue.js一句話總結(jié):用數(shù)據(jù)綁定的思想,vue可以簡(jiǎn)單寫單個(gè)頁面,也可以寫一個(gè)大的前端系統(tǒng),也可以做手機(jī)app的界面。

好程序員

  1、Vue.js是什么?

  漸進(jìn)式框架

  自底向上增量開發(fā)的設(shè)計(jì)

  易學(xué)習(xí)

  易整合

  Vue.js(讀音 /vju?/, 類似于 view) 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是,Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層,并且非常容易學(xué)習(xí),非常容易與其它庫或已有項(xiàng)目整合。另一方面,Vue 完全有能力驅(qū)動(dòng)采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。

  2、vue.js到底適合做哪種類型的界面?

  a、表單項(xiàng)繁多

  b、內(nèi)容需要根據(jù)用戶的操作進(jìn)行修改

  Vue.js就是一個(gè)用于搭建類似于網(wǎng)頁版知乎這種表單項(xiàng)繁多,且內(nèi)容需要根據(jù)用戶的操作進(jìn)行修改的網(wǎng)頁版應(yīng)用。

  3、單頁應(yīng)用程序(SPA)是什么?

  一個(gè)頁面就是應(yīng)用(子應(yīng)用)

  顧名思義,單頁應(yīng)用一般指的就是一個(gè)頁面就是應(yīng)用,當(dāng)然也可以是一個(gè)子應(yīng)用,比如說知乎的一個(gè)頁面就可以視為一個(gè)子應(yīng)用。單頁應(yīng)用程序中一般交互處理非常多,而且頁面中的內(nèi)容需要根據(jù)用戶的操作動(dòng)態(tài)變化。

  4、 前面說的網(wǎng)頁版知乎我也可以用JQuery寫啊,為什么要用Vue.js呢?

  a、產(chǎn)品是絕對(duì)需要反復(fù)修改的

  b、修改可能會(huì)導(dǎo)致DOM的關(guān)聯(lián)與嵌套層次要發(fā)生改變從而使jquery結(jié)構(gòu)相關(guān)代碼變的異常復(fù)雜

  c、vue.js可以解決這個(gè)問題

  你是否還記得你當(dāng)初寫JQuery的時(shí)候,有寫過('#xxx').parent().parent().parent()這種代碼呢?當(dāng)你diyi次寫的時(shí)候,你覺得頁面元素不多,不就是找這個(gè)元素的爸爸的爸爸的爸爸嗎,我大不了在注釋里面寫清楚這個(gè)元素的爸爸的爸爸的爸爸不就好了。但是萬一過幾天之后你的項(xiàng)目組長(zhǎng)或者你的產(chǎn)品經(jīng)理突然對(duì)你做的網(wǎng)頁提出修改要求,這個(gè)修改要求將會(huì)影響頁面的結(jié)構(gòu),也就是DOM的關(guān)聯(lián)與嵌套層次要發(fā)生改變,那么(‘#xxx’).parent().parent().parent()可能就會(huì)變成$(‘#xxx’).parent().parent().parent().parent().parent()了。

  這還不算什么,等以后產(chǎn)品迭代越來越快,修改越來越多,而且頁面中類似的關(guān)聯(lián)和嵌套DOM元素不止一個(gè),那么修改起來將非常費(fèi)勁。而且JQuery選擇器查找頁面元素以及DOM操作本身也是有性能損失的,可能到時(shí)候打開這個(gè)頁面,會(huì)變得越來越卡,而你卻無從下手。

  這個(gè)時(shí)候如果你學(xué)過Vue.js,那么這些抱怨將不復(fù)存在。

  5、前端里面常說的視圖層是什么?

  我們把HTML中的DOM就可以與其他的部分獨(dú)立開來劃分出一個(gè)層次,這個(gè)層次就叫做視圖層。

  Vue 的核心庫只關(guān)注視圖層

  6、使用jquery開發(fā)完整頁面的流程?

  a、html寫構(gòu)架

  b、css裝飾

  c、js交互

  講到JQuery,就不得不說到JavaScript的DOM操作了。如果你用JQuery來開發(fā)一個(gè)知乎,那么你就需要用JQuery中的各種DOM操作方法去操作HTML的DOM結(jié)構(gòu)了。

  現(xiàn)在我們把一個(gè)網(wǎng)頁應(yīng)用抽象一下,那么HTML中的DOM其實(shí)就是視圖,一個(gè)網(wǎng)頁就是通過DOM的組合與嵌套,形成了最基本的視圖結(jié)構(gòu),再通過CSS的修飾,在基本的視圖結(jié)構(gòu)上“化妝”讓他們看起來更加美觀。最后涉及到交互部分,就需要用到JavaScript來接受用戶的交互請(qǐng)求,并且通過事件機(jī)制來響應(yīng)用戶的交互操作,并且在事件的處理函數(shù)中進(jìn)行各種數(shù)據(jù)的修改,比如說修改某個(gè)DOM中的innerHTML或者innerText部分。

  7、Vue.js為什么能讓基于網(wǎng)頁的前端應(yīng)用程序開發(fā)起來這么方便?

  a、有聲明式

  b、響應(yīng)式的數(shù)據(jù)綁定

  c、組件化的開發(fā)

  d、Virtual DOM

  因?yàn)閂ue.js有聲明式,響應(yīng)式的數(shù)據(jù)綁定,與組件化的開發(fā),并且還使用了Virtual DOM這個(gè)看名字就覺得高大上的技術(shù)。

  8、vue.js中常說的數(shù)據(jù)動(dòng)態(tài)綁定是什么?

  就是vue.js會(huì)自動(dòng)響應(yīng)數(shù)據(jù)的變化情況,并且根據(jù)用戶在代碼中預(yù)先寫好的綁定關(guān)系,對(duì)所有綁定在一起的數(shù)據(jù)和視圖內(nèi)容都進(jìn)行修改。而這種綁定關(guān)系,在圖上是以input 標(biāo)簽的v-model屬性來聲明的,因此你在別的地方可能也會(huì)看到有人粗略的稱vue.js為聲明式渲染的模版引擎。

  9、前端中為什么要組件化開發(fā)?

  a、非組件化開發(fā)代碼和工作量都非常大

  b、修改起來生不如死

  但是現(xiàn)在我們做單頁應(yīng)用,頁面交互和結(jié)構(gòu)十分復(fù)雜,一個(gè)頁面上就有許許多多的模塊需要編寫,而且往往一個(gè)模塊的代碼量和工作量就非常龐大,如果還按照原先的方法來開發(fā),那么會(huì)累死人。而且遇到以后的產(chǎn)品需求變更,修改起來也非常麻煩,生怕動(dòng)了其中一個(gè)div之后,其他div跟著雪崩,整個(gè)頁面全部亂套,或者由于JavaScript的事件冒泡機(jī)制,導(dǎo)致修改一些內(nèi)層的DOM事件處理函數(shù)之后,出現(xiàn)各種莫名其妙的詭異BUG。

  10、前端中如何進(jìn)行組件化開發(fā)?

  a、借用的后端的面向?qū)ο笾械哪K化思想(把一些大功能拆分成許多函數(shù),然后分配給不同的人來開發(fā))

  b、把一個(gè)單頁應(yīng)用中的各種模塊拆分到一個(gè)一個(gè)單獨(dú)的組件(component)中,我們只要先在父級(jí)應(yīng)用中寫好各種組件標(biāo)簽(占坑),并且在組件標(biāo)簽中寫好要傳入組件的參數(shù)(就像給函數(shù)傳入?yún)?shù)一樣,這個(gè)參數(shù)叫做組件的屬性),然后再分別寫好各種組件的實(shí)現(xiàn)(填坑)

  在面向?qū)ο缶幊讨校覀兛梢允褂妹嫦驅(qū)ο蟮乃枷雽⒏鞣N模塊打包成類或者把一個(gè)大的業(yè)務(wù)模塊拆分成更多更小的幾個(gè)類。在面向過程編程中,我們也可以把一些大功能拆分成許多函數(shù),然后分配給不同的人來開發(fā)。

  在前端應(yīng)用,我們是否也可以像編程一樣把模塊封裝呢?這就引入了組件化開發(fā)的思想。

  Vue.js通過組件,把一個(gè)單頁應(yīng)用中的各種模塊拆分到一個(gè)一個(gè)單獨(dú)的組件(component)中,我們只要先在父級(jí)應(yīng)用中寫好各種組件標(biāo)簽(占坑),并且在組件標(biāo)簽中寫好要傳入組件的參數(shù)(就像給函數(shù)傳入?yún)?shù)一樣,這個(gè)參數(shù)叫做組件的屬性),然后再分別寫好各種組件的實(shí)現(xiàn)(填坑),然后整個(gè)應(yīng)用就算做完了。

  11、為什么有Virtual DOM技術(shù)?

  a、問題

  現(xiàn)在的網(wǎng)速越來越快了,很多人家里都是幾十甚至上百M(fèi)的光纖,手機(jī)也是4G起步了,按道理一個(gè)網(wǎng)頁才幾百K,而且瀏覽器本身還會(huì)緩存很多資源文件,那么幾十M的光纖為什么打開一個(gè)之前已經(jīng)打開過,已經(jīng)有緩存的頁面還是感覺很慢呢?

  b、原因

  (1)、瀏覽器本身處理DOM也是有性能瓶頸的

  (2)、用JQuery或者原生的JavaScript DOM操作函數(shù)對(duì)DOM進(jìn)行頻繁操作的時(shí)候,瀏覽器要不停的渲染新的DOM樹

  這就是因?yàn)闉g覽器本身處理DOM也是有性能瓶頸的,尤其是在傳統(tǒng)開發(fā)中,用JQuery或者原生的JavaScript DOM操作函數(shù)對(duì)DOM進(jìn)行頻繁操作的時(shí)候,瀏覽器要不停的渲染新的DOM樹,導(dǎo)致頁面看起來非常卡頓。

  12、Virtual DOM如何實(shí)現(xiàn)?

  a、預(yù)計(jì)算dom的各種操作,把最后一次的結(jié)果渲染出來(減少dom的渲染次數(shù))

  而Virtual DOM則是虛擬DOM的英文,簡(jiǎn)單來說,他就是一種可以預(yù)先通過JavaScript進(jìn)行各種計(jì)算,把最終的DOM操作計(jì)算出來并優(yōu)化,由于這個(gè)DOM操作屬于預(yù)處理操作,并沒有真實(shí)的操作DOM,所以叫做虛擬DOM。最后在計(jì)算完畢才真正將DOM操作提交,將DOM操作變化反映到DOM樹上。

  13、到底該怎么用Vue.js做單頁應(yīng)用開發(fā)?

  其實(shí)可以直接看學(xué)習(xí)視頻開始干,應(yīng)該是zuihao的

  a、介紹 - vue.js官方文檔的基礎(chǔ)部分硬著頭皮看一遍

  我的建議是,先把介紹 - vue.js官方文檔的基礎(chǔ)部分硬著頭皮看一遍。除了組件這個(gè)小節(jié)涉及到了很多晦澀難懂的名詞以外,前面幾章完全就是把Vue.js當(dāng)作一個(gè)模版引擎來用。

  b、ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,zuihao對(duì)Node.js也要有所了解

  然后開始學(xué)習(xí)ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,zuihao對(duì)Node.js也要有所了解。

  c、看網(wǎng)上各種實(shí)戰(zhàn)視頻以及文章還有別人開源的源代碼

  最后組件部分先大致看一遍,了解組件里面都有哪些概念之后,開始看網(wǎng)上各種實(shí)戰(zhàn)視頻以及文章還有別人開源的源代碼。

  14、ECMAScript是啥?

  ECMAScript 和 JavaScript 的關(guān)系是,前者是后者的規(guī)格,后者是前者的一種實(shí)現(xiàn)(另外的 ECMAScript 方言還有 Jscript 和 ActionScript)。日常場(chǎng)合,這兩個(gè)詞是可以互換的。

  而ECMAScript6就是新一代的JavaScript語言。

  15、Webpack是啥?

  a、前端打包工具

  Webpack是一個(gè)前端打包和構(gòu)建工具。如果你之前一直是手寫HTML,CSS,JavaScript,并且通過link標(biāo)簽將CSS引入你的HTML文件,以及通過Script標(biāo)簽的src屬性引入外部的JS腳本,那么你肯定會(huì)對(duì)這個(gè)工具感到陌生。不要緊,我們先來了解一下為什么要用Webpack,然后帶著原因去學(xué)習(xí)就好了。

  16、為什么要用Webpack?

  a、方便管理各種素材

  b、打包以便減少瀏覽器的訪問次數(shù)

  前面說了,做一個(gè)單頁應(yīng)用程序本身就相當(dāng)復(fù)雜,而且在做的時(shí)候肯定會(huì)使用到很多素材和別的第三方庫,我們?cè)撊绾稳ス芾磉@些東西呢?

  還有前面講到了Webpack是一個(gè)前端打包工具,前端代碼為什么要打包呢?因?yàn)閱雾搼?yīng)用程序中用到很多素材,如果每一個(gè)素材都通過在HTML中以src屬性或者link來引入,那么請(qǐng)求一個(gè)頁面的時(shí)候,可能瀏覽器就要發(fā)起十多次請(qǐng)求,往往請(qǐng)求的這些資源都是一些腳本代碼或者很小的圖片,這些資源本身才幾k,下載連1秒都不需要,但是由于HTTP是應(yīng)用層協(xié)議,它的下層是TCP這個(gè)運(yùn)輸層協(xié)議,TCP的握手和揮手過程消耗的時(shí)間可能比下載資源本身還要長(zhǎng),所以需要把這些小文件全部打包成一個(gè)文件,這樣只要一次TCP握手和揮手的過程,就把多個(gè)資源給下載下來了,并且多個(gè)資源由于都是共享一個(gè)HTTP請(qǐng)求,所以head等部分也是共享的,相當(dāng)于形成了規(guī)模效應(yīng),讓網(wǎng)頁展現(xiàn)更快,用戶體驗(yàn)更好。

  17、NPM和Node.js又是什么?它們是什么關(guān)系?

  a、Node.js是一個(gè)服務(wù)端的JavaScript運(yùn)行環(huán)境

  Node.js是一個(gè)服務(wù)端的JavaScript運(yùn)行環(huán)境,通過Node.js可以實(shí)現(xiàn)用JavaScript寫?yīng)毩⒊绦颉?/p>

  b、Node.js可以寫?yīng)毩⒊绦?Webpack就是Node.js寫的)

  像我們之前提到的Webpack就是Node.js寫的,所以作為一個(gè)前端開發(fā),即使你不用Node.js寫?yīng)毩⒊绦颍驳门湟粋€(gè)Node.js運(yùn)行環(huán)境,畢竟很多前端工具都是使用它寫的。

  c、NPM是一個(gè)node.js的包管理器(類似java的maven(包的依賴管理),php也有一個(gè)類似的)。

  NPM是一個(gè)node.js的包管理器。我們?cè)趥鹘y(tǒng)開發(fā)的時(shí)候,JQuery.js大多都是百度搜索,然后去官網(wǎng)下載,或者直接引入CDN資源,這種方法太過于麻煩。如果以后遇到其他的包,這個(gè)包的代碼本身可能還調(diào)用了其他的包(也稱這個(gè)包和其他的那幾個(gè)包存在依賴關(guān)系),那么我們要在自己的項(xiàng)目中引入一個(gè)包將變得十分困難。現(xiàn)在我們有了NPM這個(gè)包管理器,直接可以通過

  npm install xxx包名稱

  的方式引入它,比如說

  npm install vue

  18、Vue-CLi是啥?

  它是一個(gè)vue.js的腳手架工具。說白了就是一個(gè)自動(dòng)幫你生成好項(xiàng)目目錄,配置好Webpack,以及各種依賴包的工具,它可以通過

  npm install vue-cli -g

  的方式安裝,后面的-g表示全局安裝的意思,意味著你可以打開命令行之后直接通過vue命令調(diào)用它。

  19、Vuex和Vue-route是什么

  Vuex是vue的一個(gè)狀態(tài)管理器。用于集中管理一個(gè)單頁應(yīng)用程序中的各種狀態(tài)。

  Vue-route是vue的一個(gè)前端路由器,這個(gè)路由器不是我們上網(wǎng)用的路由器,而是一個(gè)管理請(qǐng)求入口和頁面映射關(guān)系的東西。它可以實(shí)現(xiàn)對(duì)頁面局部進(jìn)行無刷新的替換,讓用戶感覺就像切換到了網(wǎng)頁一樣。

  要講清楚這兩個(gè)東西,又得花費(fèi)大量篇幅,所以這里只是簡(jiǎn)單提一下,先學(xué)好vue.js本身才是最重要的。

  最后喜歡的小伙伴點(diǎn)個(gè)關(guān)注、收藏、轉(zhuǎn)發(fā)哦!

好程序員公眾號(hào)

  • · 剖析行業(yè)發(fā)展趨勢(shì)
  • · 匯聚企業(yè)項(xiàng)目源碼

好程序員開班動(dòng)態(tài)

More+
  • HTML5大前端 <高端班>

    開班時(shí)間:2021-04-12(深圳)

    開班盛況

    開班時(shí)間:2021-05-17(北京)

    開班盛況
  • 大數(shù)據(jù)+人工智能 <高端班>

    開班時(shí)間:2021-03-22(杭州)

    開班盛況

    開班時(shí)間:2021-04-26(北京)

    開班盛況
  • JavaEE分布式開發(fā) <高端班>

    開班時(shí)間:2021-05-10(北京)

    開班盛況

    開班時(shí)間:2021-02-22(北京)

    開班盛況
  • Python人工智能+數(shù)據(jù)分析 <高端班>

    開班時(shí)間:2021-07-12(北京)

    預(yù)約報(bào)名

    開班時(shí)間:2020-09-21(上海)

    開班盛況
  • 云計(jì)算開發(fā) <高端班>

    開班時(shí)間:2021-07-12(北京)

    預(yù)約報(bào)名

    開班時(shí)間:2019-07-22(北京)

    開班盛況
IT培訓(xùn)IT培訓(xùn)
在線咨詢
IT培訓(xùn)IT培訓(xùn)
試聽
IT培訓(xùn)IT培訓(xùn)
入學(xué)教程
IT培訓(xùn)IT培訓(xùn)
立即報(bào)名
IT培訓(xùn)

Copyright 2011-2023 北京千鋒互聯(lián)科技有限公司 .All Right 京ICP備12003911號(hào)-5 京公網(wǎng)安備 11010802035720號(hào)